I'm using CodeIgniter, i've been searching for this part and no answer is what i want.
how to add preview image and file in another element of dropdownJS, let's call div#preview like this

<form action='upload' class='dropzone'>
    //dropzone usually add preview in here
</form>

<div id='preview'>
    //what i want image preview in here, so form is just for uploading
</div>

My goal is:
1. Preview image is in outside dropzone class
2. After refresh page, still displaying preview image
3. For displaying after refresh page, is it possible without saving filename in database?

I'm using CodeIgniter, i've been searching for this part and no answer is what i want.
how to add preview image and file in another element of dropdownJS, let's call div#preview like this

<form action='upload' class='dropzone'>
    //dropzone usually add preview in here
</form>

<div id='preview'>
    //what i want image preview in here, so form is just for uploading
</div>

My goal is:
1. Preview image is in outside dropzone class
2. After refresh page, still displaying preview image
3. For displaying after refresh page, is it possible without saving filename in database?

• javascript
• dropzone.js
• codeigniter-3

• You might want to share what you have tried so far :) – Fge Commented Jun 15, 2016 at 7:06

1 Answer 1

Sorry my fault didn't read dropzonejs doc detailed,
The solution is just add setting

previewsContainer: //set to where element to display,

example :

Dropzone.autoDiscover = false;
var myDropzone = new Dropzone(".dropzone", {
    url: " some_upload_url ",
    acceptedFiles: "image/*",
    addRemoveLinks: true,
    previewsContainer: '#preview', //this will change preview to element selected
    etc etc