How to redirect dropzone.js selected preview image to a new page?

Question

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("");
    });

Answer 1

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 .