Delete image via AJAX on page leave

Question

I'm currently programming a form where users can also upload an image. The image gets uploaded to my server (to generate a preview).

If the user submits the form, everything will be good. But what if they close the editor? In this case the image will be stored on the server forever and uses needed space.

How can I handle the scenario where the image has been uploaded, but not the form has not yet been submitted?

One option I thought of is to use the unload() function to trigger an AJAX call which deletes the image on the server if the user closes the tab:

$( window ).unload(function() {
  //Make AJAX call here and pass the name of the file
});

What other options are there? How can I handle this?

If the user Does use the image, that link between the image and what it's used for will be inside a database. So apart from if you want to delete on unload, I would periodically check the server for all images that are not used anywhere, to account for browser crashes and other situations where the unload handler might not get executed, but the user did upload an image. — Shilly, Jul 29 '19 at 13:53
Maybe modify the server side code tthat runs when the user submits the form - move the image to a 'processed' directory - then periodically clear out any images that haven't been moved. — peeebeee, Jul 29 '19 at 13:54
As for it not being an opinion question....you asked *"is this a good way?"* which clearly asks for opinions — charlietfl, Jul 29 '19 at 14:03
I've attempted to make this a non-opinion-based question, while still including your existing attempt (so you don't get "no attempt" down-votes). But there's still no single definitive answer, so you might only get comments such as those already provided. — freedomn-m, Jul 29 '19 at 14:11

score 0 · Answer 1 · edited Jul 29 '19 at 14:05

0

You can do in other way, you can check once (twice or whatever) a day all the uploaded image, for each file check the db row (select by filename), if no row is found delete the file.

edited Jul 29 '19 at 14:05

freedomn-m

21,261
4
28
53

answered Jul 29 '19 at 13:57

red

1,334
6
25

score 0 · Answer 2 · answered Jul 29 '19 at 14:11

0

If the user has not submitted the form in-which the the file is uploaded then then the file hasn't been uploaded and won't be stored on the server. There is no need to do anything.

answered Jul 29 '19 at 14:11

olleicua

1,717
1
17
30

I'm uploading the file on input type file change to give the user a preview. – Mr. Jo Jul 29 '19 at 14:12
This would be a valid option: submit the form and the image together. But OP clearly states that the image is uploaded to the server, which, along with the entire premise of the question, implies that the image is uploaded before submitted. – freedomn-m Jul 29 '19 at 14:13
1

I guess his saving the image to the server immediately the user uploads rather than onform submit. – Giddy Naya Jul 29 '19 at 14:13
@Mr. Jo that is not a good implemetation. If you need to show preview to a user you dont necessarily need to send it to the server. [See here](https://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded) – Giddy Naya Jul 29 '19 at 14:15
@GiddyNaya I'm using dropzone. So no clue if there is a custom preview available. – Mr. Jo Jul 29 '19 at 14:19
@Mr.Jo A dropzone doesn't have to do the upload, it's how you handle the drop event that determines that – charlietfl Jul 29 '19 at 14:20
@charlietfl But can I show a preview without uploading it? I'm not sure if this is possible. – Mr. Jo Jul 29 '19 at 14:25
1

I have also used Dropzone and can still recall that it has an interface where it returns the img object of the selected file which you can make use of. e.g passing it to any image tag on your page for preview. Just do a google and i bet you would find lots of implementation on it. maybe your implementation of it is wrong – Giddy Naya Jul 29 '19 at 14:27
@Mr.Jo yes it is by using FileReader API and transforming file to a data url. Link above shows doing that – charlietfl Jul 29 '19 at 14:28
@charlietfl Is there an example you used before with success? – Mr. Jo Jul 29 '19 at 14:28

score 0 · Accepted Answer · answered Aug 15 '19 at 10:25

I've changed everything now. I don't upload it during the selection. For this I've set the dropzone settings to autoProcessQueue: false. After this I've used a file reader to get a preview without any upload to my server:

this.on( "addedfile", function () {
    this.files.length > this.options.maxFiles && this.removeFile( this.files[0] );
    let fileReference = image.files && image.files[0],
        reader        = new FileReader();

    reader.onload = ( e ) => {
        jQuery( "#image" ).attr( "src", e.target.result );
    };

    reader.readAsDataURL( fileReference );
} );

Delete image via AJAX on page leave

3 Answers3