In my app I need to upload an image to the server, and user needs to preview the file before uploading it. So do it like this:
Show an image preview before upload
But after posted to server and there may be some errors, I have to return it back to client. Of course, the preview image loaded on client was lost, now I want to load it back again but I can't find the file to load using javascript. I have tried some ways:
$("file-input-selector").prop("files")
or:
document.getElementById("file-input-id").files
These only work when I select another image on the machine. After posted back from server both ways show 0 files
Is there another way to get the file after posted to the server back?
Related
I'm trying to upload a photo from the web page to a node.js web server behind, I just cannot figure out how to upload the picture that Webcam-easy.js has generated by doing let picture = webcam.snap();, it also saves it to a canvas. It needs to be a POST request. The URL it need's to be uploaded to is /upload/ and the image needs to be tagged as file. When the backend gets it it saves the file to an uploads folder.
I'm working with a pdf viewer, that will load a pdf file from server (nodejs) and then rendering on client side to allow user reading direct in my site.
I'm using pdf.js to rendering pdf file on client side. The problem is client side must download entire pdf file before they can parse and render it, so if the file is too large (~200MB in my case), user must wait for download entire 200MB.
I researched and i think i can solve this problem by 2 ways:
Split the large pdf file into many smaller pdf files on the server side, and serve only specific small file on-demand. But this way, i will lost some important metadata like the pdf outlines,...
Using pdf.js direct in server side, get the pdf pages and then serve each page as binary to client side, client side will also use pdf.js (addPage function) to add each page to their viewer. But i don't know it is possible or not.
So what should i do to solve this problem?
Thank you so much.
The best solution is to optimize all your PDF files for web.
The default settings of pdf.js will load only the portion it needs to render.
See here for more info.
I am looking to make a website that does three things:
The user can upload an image to the website (without a server)
-For this problem, I have found resources like Dropzone, but all seem to mandate sending the image to a server.
The uploaded file is manipulated on the client side
-For this problem, I need the uploaded file to be accessible from my JS/HTML code and I need some way for me to manipulate the file. I currently have my website with the pre-set file embedded in it, which I can then access and manipulate with JS, so the manipulation itself isn't much of the issue, but rather just accessing the file.
The user can then download the manipulated file (again, without a server)
-For this problem, I know that how to make a download button for files that have a web address (which are on a server), but is there a way to have a download button for the file that was just manipulated? I found this question here that seems to be a good starting point, but I am not sure if I completely understand the implementation of it.
Basically, I have the website framework in place (using HTML/CSS, Javascript) and I am just looking to see if this is possible to do without the use of a server, even if I have to use some other libraries. If any insight or links to potentially useful articles/libraries could be given on any one of these three points, I would much appreciate it.
Note: If this is not possible without a server, please let me know because then I will have to completely redesign everything and this whole question is trivial.
The user can upload an image to the website (without a server)
A website is typically hosted on a server. I think you mean the image is uploaded, but not stored anywhere.
The uploaded file is manipulated on the client side
There are lots of cool JS libraries to handle this, for something light you can try out https://fengyuanchen.github.io/cropperjs/
The user can then download the manipulated file (again, without a server)
So if I am understanding you are asking for an image upload -> edit -> image download. This is very possible and common. However, you will need somewhere to cache the uploaded image for the client.
If you are asking if you can upload an image directly to the DOM, you can not. You need to upload the image to the location where your files are being hosted. Imagine having an absolute path to C:/MyComputer/MyImage, it would obviously not work on any other machine than your machine.
If you need some examples on how to handle the upload image to temp location -> edit -> download let me know
From UI using HTML input file, I want to upload images. In JavaScript, I want to store these uploaded images in a specific folder by creating a unique URL to the image. Later, I post the rest of the web-service and I send this image URL to store it along with some other data, and I want to display the images in the UI.
Can anyone please suggest a way to do this?
Your question is confusing, it is not clear whether you are talking about storing the file in browser or on the server. If you want to create a file/folder on your local browser filesystem and store the file in browser (before sending to server or cache a copy) you should read these two articals:
Create a file in browser filesystem:
https://www.html5rocks.com/en/tutorials/file/filesystem/
Create a data URL for image file:
https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications
I have an upload function on a page that uploads any attached file.
Below the attachment button, i have a list of uploaded files that fails to refresh and display the latest attached file.
When a small file is added, by the time my refresh function kicks in, it has already uploaded, and so my page refreshes and displays the upload.
problem is, whn i upload a larger file, the refresh kicks in BEFORE the file is uploaded, so no new file is displayed.
Is there a way to wait for the upload and then update the list?
Normally you will post the form with the file to the server, and the server will respond with the updated page when the upload is complete.
If you use a different way of uploading files, you have to use whatever method that solution provides for signalling when the upload is complete. Unless you are using a component (ActiveX/Java/Silverlgith) to do the upload, there is still a form somewhere that is posted to the server, and the server still returns a response when the upload is done.