0

Using dropzone I would browse for a image file and the preview image would be displayed on the class "dropzone-previews". On the below the button trigger, how I can send "dropzone-previews" to another new page and display the image from there?

HTML

<form action="/upload-file"  type="file" class="dropzone" id="upload-file-form" enctype="multipart/form-data"> 
   <div class="filepicker"></div>
   <div class="addFileButton">browse</div>
</form> 

<button type="submit" class="btn btn-success pull-right"` id="btnUpload">Upload</button>

<div class="dropzone-previews"></div>

JS

Dropzone.autoDiscover = false;
    var myDropzone = new Dropzone('#upload-file-form', {
        paramName: "file",
        url: '/upload-file',
        method: 'post', 
        acceptedFiles: ".png,.jpg,.gif,.jpeg",
        maxFilesize: 256,
        maxFiles: 1,
        maxfilesexceeded: function(file) {
            this.removeAllFiles();
            this.addFile(file);   
        },
        parallelUploads: 1,
        uploadMultiple: false,
        autoProcessQueue: false,
        addRemoveLinks: false,
        clickable: ".addFileButton",

        previewsContainer: ".dropzone-previews",

    }); 

    $('#btnUpload').on('click', function(){
        //redirect to new page (i.e myNewPage.php) along with the image
        window.location.replace("");
    });
Fortytwo
  • 99
  • 1
  • 3
  • 8

1 Answers1

0

Well, you would need to upload it somewhere and display the link. Atleast if you are only using jquery and php.

To upload it, you can hook into its events and post it to a php script to save or to aws.

  myDropzone.on("addedfile", function(file) {
   /* Here you could use jquery ajax calls to post it */
  });

You can read about the dropzone documentation of the event here, and about uploading files with ajax jquery here and here.

Aman
  • 53
  • 7
  • I am not uploading/saving anything yet, just a raw preview of the image and I would like to carry over the preview image to a new page. – Fortytwo Mar 02 '19 at 23:17
  • Without uploading it, the image is saved in the browser. You can take the file and set its data as the src of an image tag and display it. You cannot reload or redirect the page, as it will then no longer have the image data available to the client. I would render it immediately, but that would be more in the context of an SPA framework. – Aman Mar 02 '19 at 23:21