-1

I am looking to make a website that does three things:

  1. 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.

  2. 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.

  3. 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.

Alerra
  • 1,479
  • 11
  • 25
  • The term "upload" doesn't really make sense in a server-less context. The action it seems like you're actually looking for is for a user to load an image into the browser, which is addressed in [this earlier SO post](https://stackoverflow.com/questions/3996004/load-local-image-into-browser-using-javascript) – wbadart Jul 18 '17 at 18:34
  • Where would they be uploading the file, if it's not to a server? Something has to be on the receiving end of the upload. – Ken White Jul 18 '17 at 18:35
  • Yea, I think I more meant to say what @wilusdaman was saying with the user to load an image into the browser, my bad. – Alerra Jul 18 '17 at 18:36
  • Not mention a website typically runs on a server. How do you access your website without it running on a server somewhere? Do you plan to copy your "website" to each user's computer? – Rick S Jul 18 '17 at 18:37
  • Well, I am running a simple Python server but I really don't know how to do anything other than run it. Some peers have said that running all on client side is better for some reason, but if using servers is much easier then I would be open to learning how to do all of that. – Alerra Jul 18 '17 at 18:40

1 Answers1

2

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

Surreal
  • 1,007
  • 1
  • 13
  • 29
  • yea any examples you have would be great, thanks so much! – Alerra Jul 18 '17 at 18:50
  • is this a jquery project? I think I have my file uploader on hand – Surreal Jul 18 '17 at 18:52
  • yea I have jQuery up and running, so that would totally be within the scope of what I can do – Alerra Jul 18 '17 at 18:53
  • https://stackoverflow.com/questions/2320069/jquery-ajax-file-upload The second answer is better written out than anything I could of copy-pasted from my old code-base. Basically send a POST with AJAX that includes your blob and use some XHR2 magic to send it to a temp location on your server. Delete the temp folder daily or what have you – Surreal Jul 18 '17 at 19:06
  • Ok cool! I'll check it out. (I would upvote your answer but I don't have enough rep yet. Sry) – Alerra Jul 18 '17 at 19:07
  • You absolutely can work with, and manipulate files without ever having to upload them to a 'backend' resource--just keeping them in the local browser instance. Here is a working example using jQuery but you could do similar in your own flavor. https://codepen.io/SpencerCooley/pen/JtiFL/ – Ben Keating Sep 05 '19 at 12:08