I upload image from vue, to server. The server will return the image url, but it's will process the image first, and then upload it to AWS. And the process may takes about 1 - 3 second untill the image fully uploaded to AWS
The problem is my vue already get the image url before the image fully upload, and try to load it in <img>, and an error happen, 404 not found. Because it's not fully uploaded to AWS.
Question:
How to automatically load an image as soon as the image available on AWS using best practice / clean way?
For now, I use looping, and use #error, and check every 1 second. But I think it's not clean
Related
I have found weird bug in my application. I am using VueJS3 and typescript. I am creating a media gallery, where users can manage assets. All endpoints and backend side of application works perfectly. Currently i am working on updating image files(updating image field). My code works in theory, image url updates to a new one, but even the url is newer, image that is rendered is old image(before update). When i try to view my application in incognito window, my newer image is showing. But it does not work otherwise(works if and only user clears his cache) I hope i explained myself clearly, it is a little complicated :)
When i fetch the data from api, they don't have any src, so i have to create a property when using the data. Here is the code below.
const { res, err } = await this.$api.image.getAll(params)
res.data.items.forEach(async (image: Image<Populated>) => {
image.src = this.$fileHandler(image._id)
})
Note: File handler is a special method that gives the image source by id
Apparently your assets get cached, and there are multiple ways to solve that.
Not diving too much into caching strategies and cache control tags, just do
image.src = `${this.$fileHandler(image._id)}?_=${+new Date()}`
This will generate a unique (almost) URL for your image, invalidating every previous cached one.
I was wondering is there any script that before loading accesses all images in a specific folder, parses them to get their appropriate height and width so i would use them later on? This all needs to be done before loading anything into the webpage. Is there a way ?
The only conceivable way I can think of is to make a custom server, either a standard static server with python even, or even better, with nodeJS, then let the server automatically read either
a list of all of the file names in the folder, and send it to the client, then on the client side, stop the loading with JavaScript until each picture is loaded via ajax, and analyzed by drawing to a canvas, or even just setting it as the source for an img element, then waiting for the onload event of each, and checking the width and height [not gonna write up a full code example for this but let me know if you need more clarification]
Load everything on the server side, including a list of all of the images, and also find some kind of basic image processing library for the server side, for example something like pngjs for nodejs, to get the width and height for each image, after reading it with fs.readFileSync to get the raw binary data etc., then after getting the full array of image data with NodeJS, finally (if using createServer) call request.end.... etc., for your specific web page that is being hosted at
I'm not going to write up a full code example at this time but let me know if more clarification is needed
I have a meteor app where I upload an image to S3 via a node framework called knox.
It works well but when Im getting the success response from S3 with the link to the image I also want to show it to the user like this:
$("#thumbnail").attr("src", url);
However this generates a 404 not found in the console and the image is not showing. But if I put a delay for around 5-10s it works.
setTimeout(function() {
$("#thumbnail").attr("src", url);
}, 10000);
Why do I get the URL from S3 before they are ready to show it? Is there a way I can wait until its ready before showing it to the user?
As nodejs is asynchronous (meaning that it does not wait until one request is finished before next one gets called) your url gets returned quicker than the image is uploaded, therefor you can't see the image. This could be fixed using callbacks.
I am building a Discussion Forum as part of a bigger application I am building, the forum is just 1 section of the Application.
For my TextArea fields when posting a new Topic or a Post Reply, I have decided that nothing is as good as the PageDown Markdown Library. It is the same one that StackOverflow uses on all their sites and it works better than many of it's competitors.
The way the library ships though, I am not happy with the default Insert Image functionality. You hit the button to insert an image and it allows you to enter a URL for an Image and then it inserts the proper MarkDown syntax to show the linked image.
This just won't cut it. I need the functionality that you see on StackOverflow! Very similar anyways.
I need it to show a Dialog when you click the Insert Image button, like it does now, but instead of just an input field for a Image URL, it will have 2 filed options...
Upload image from your computer
Insert an Image URL and it will then DOWNLOAD the image from that URL and insert it into the post just as if you had uploaded it from your computer. This is important to not confuse this step. IT should not simply insert the Image linking it to the original Image URL. Instead it will take that URL and download/upload the Image to the same server that the upload from computer option does and then it will insert the NEW Image URL pointing to the newly uploaded image!
Based on some simple HTML like below for a Dialog window with a filed for my Upload from Computer functionality, which I already have working. I need to come up with some JavaScript and PHP that will download/save a remote image to my upload folder on my server when a button is clicked using only the URL that will be inside the URL text input field.
So it will need to do a few things...
Fetch and save an image file to my uploads folder using PHP when the only thing that the PHP function will receive is a URL of the image which could be on the same server or most likely a remote server.
After successfully saving/uploading an image from the URL, the PHP function will return a JSON string with the status/error and if successful then it will also return the actual URL and filename of where the new image is saved on the local server. The JavaScript/AJAX script will receive this JSON response and insert the Markdown syntax for the image into the PageDown editor.
The PHP function will need to ensure that the URL that it is trying to save/download is a valid image file and not some malicious file! Also not simply just some file of the wrong filetype like a non-image file unless we are allowing the file type.
It will be part of a module installed on many dinosaur servers so it needs to work on as many servers as possible too!
From the web
From your computer
I would be greatful of any help, tips, code snippets or anything to help with this. At this stage I really just need to build a nie PHP function that will upload images from a remote URL and also ensure that the URL passed in is a real image file or even better that it is in the allowed file types array!
A couple years ago I had started this but have now lost it and I am starting over and don't remeber much about how I went about doing it then.
The easiest way to download a file from a remote server would be to use copy (http://php.net/manual/en/function.copy.php):
copy('http://someurl.com/image.png', '/var/www/uploads/image.png');
As this function returns a bool, it is easy to determine whether the operation was successful and create a JSON response.
To verify that the file is an actual image, there is unfortunately no way that is 100% sure. It is probably enough to check the mimetype though. You can use finfo for that (http://php.net/manual/en/function.finfo-file.php):
$finfo = finfo_open(FILEINFO_MIME_TYPE);
echo finfo_file($finfo, $filename);
finfo_close($finfo);
For a gif, this would return image/gif for example. You will have to hardcode a list of all mimetypes you want to allow.
The setup I work on is the following: A HTML-page with a canvas element displaying a Processing JS sketch and a form that allows to pass parameters to the sketch using JS-function Processing.getInstanceById(getProcessingSketchId()).setSomeParam();, which works just fine.
The user should also be able to upload an image to the server, the name/path of which is then also handed to the sketch to do loadImage(String path). The file upload (using PHP from here) works perfectly fine as well but now here is the question:
How can I get the name of the uploaded image on the server and pass it to the Processing sketch?
If the form's action tag points to a distinct PHP-file, the site with the canvas sketch is quit (variable $destination not available) or if the form's action tag points to the site itself (being a PHP-site, checking for if(isset($_POST['formSubmitted'])) {), the sketch is restarted losing all the previously changed parameters.
I also managed to have the form submission target to an internal iframe and display the uploaded image there, but that still doesn't solve my problem.
Thanks a lot in advance for any helpful hints!
It sounds like you have the data flow worked out but are struggling because a standard form upload causes a page refresh.
I would suggest using AJAX to post the image to a specific PHP image receiver service. When the AJAX upload is complete, the javascript can then call to the server to fetch the uploaded object and manipulate it as needed without refreshing the page.