How to remove all files from dropzone after uploading - javascript

I have created a dropzone using ng-dropzone
myApp.config(function(dropzoneOpsProvider) {
dropzoneOpsProvider.setOptions({
url: 'url',
acceptedFiles: 'image/jpeg, images/jpg, image/png',
addRemoveLinks: true,
dictDefaultMessage: 'Click to add or drop photos',
dictRemoveFile: 'Remove photo',
dictResponseError: 'Could not upload this photo',
maxFilesize: 100,
uploadMultiple: true,
parallelUploads: 5,
maxFiles: 10
});
});
myApp.controller('topStoryController',
$scope.dzOptions = {
paramName: 'file',
maxFilesize: '10'
}; $scope.dzCallbacks = {
'successmultiple': function(file, xhr) {
console.log('uploaded ' + file.name);
console.log(file, xhr);
console.log(xhr.path);
},
};
$scope.post = function() {
}
);
Here I am uploading multiple image using dropzone that is working properly
after imaaging upload on post I want to remove images from dropzone.
how to achive this?

dropzone has the following function for removing all files.
removeAllFiles();
documentation of dropzone explains this function as following
If you want to remove all files, simply use .removeAllFiles(). Files
that are in the process of being uploaded won’t be removed. If you
want files that are currently uploading to be canceled, call
.removeAllFiles(true) which will cancel the uploads.
documentation of the ng-dropzone directive states that you can access dropzone functions using the following
$scope.dzMethods.removeFile(file);
or
<button ng-click="dzMethods.removeAllFiles();">...</button>

Related

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

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

store file as html element dropzone.js

Is there any way to store the uploaded file as a html element like in file input in dropzone.js? And not upload automatically?
I have referred these, but didn't helped.
Saving dropzone uploaded files to array
use dropzone without auto uploading
Currently I'm directly uploading the files to the server on drop like this,
$(this).dropzone({
url: base_url + 'document-manager',
addRemoveLinks: true,
dictDefaultMessage: 'Drop files or click here to upload',
maxFiles: 1,
init: function () {
myDropzone = this;
myDropzone.on("success", function (file, response) {
fileId = response;
});
myDropzone.on("removedfile", function (file) {
$.ajax({
type: "delete",
url: base_url + 'document-manager/' + fileId,
async: false,
data: {'_token': $('[name=_token').val()}
}).responseText;
});
}
});
Now I want to send the files as the file input. Is it possible in dropzone.js?
P.S. I just want to store the selected file from dropzone to store in some custom file input.

Can I add/remove the inputs one by one? - dropzone.js

Can I add/remove the inputs one by one?
The input should only post the currently selected array of files.
I am using dropzone.js for my current project and dropzone.js does not help to append file as HTML file input and how I can post image files when post data.
This is my script:
var myDropzone = new Dropzone("#filedrag",{
url: "upload", // Set the Upload Url
parallelUploads: 5,
thumbnailWidth: 600,
thumbnailHeight: 600,
acceptedFiles:"image/*",
previewTemplate: previewTemplate,
maxFiles: 20,
previewsContainer: "#previews",
clickable: ".fileinput-button",
init: function() {this.on("success", function(file, response) {
});
this.on("addedfile", function(file) {
});
}
});

Dropzone.js 5.0 - use existing images and send the data to the server

I have successfully used Dropzone to display existing files from my server. However, when I submit the form, only new files are submitted to the server, so I don't know if the user has deleted any. Essentiall I want to send the data for all the files currently displayed, including the 'mocked' files and the newly uploaded ones.
I am using autoProcessQueue: false so that I can have a separate submit button to send the data to the server.
My Code:
Dropzone.options.createListingForm = {
autoProcessQueue: false,
uploadMultiple: true,
previewsContainer: '.create-listing-form-uploads',
parallelUploads: 100,
maxFiles: 100,
addRemoveLinks: true,
init: function () {
var thisDropzone = this;
var photos = form.data('photos');
$.each(photos, function (key, photo) {
var mockFile = {
name: photo.name,
size: photo.size,
type: photo.type,
accepted: true
};
thisDropzone.files.push(mockFile); // add to files array
thisDropzone.emit("addedfile", mockFile);
thisDropzone.emit("thumbnail", mockFile, photo.path);
thisDropzone.emit("complete", mockFile);
});
}
};
form.on('click', '.create-listing-form-save-photos', function () {
$('.dropzone').get(0).dropzone.processQueue();
return false;
});
Thanks to this answer for the first part of my code:
https://stackoverflow.com/a/45701181/5482719
Each time a file (including mock Files) is removed/deleted from the dropzone, the removedfile event is fired.
You could use this event to delete the removed file from your server as follows:
myDropzone.on("removedfile", function(file) {
// 'file' parameter contains the file object.
console.log('Removed File', file);
// Delete file from server
$.ajax({
type: 'POST',
url: 'url/that/handles/delete',
data: {
fileName: file.name,
},
dataType: 'json'
}).done(function (response) {
// check repsonse, notify user
}).fail(function(resp) {
console.log('xhr failed', resp);
}).always(function(resp) {
// do nothing for now
});
});
Hope that helps.

How to make images inline

Dropzone.js is not showing preview as one image after another how to resolve this and how to show image with progress bar (not the file name and file size).
I have included basic.css file
my code is
in html
<div id="dropzone-previews">
</div>
javascript
Dropzone.options.myAwesomeDropzone = {
paramName: "file",
maxFilesize: 10,
url: 'UploadImages',
previewsContainer: "#dropzone-previews",
uploadMultiple: true,
parallelUploads: 5,
maxFiles: 20,
// addRemoveLinks: true,
init: function() {
var cd;
this.on("success", function(file, response) {
$('.dz-progress').hide();
console.log(response);
console.log(file);
cd = response;
});
};
Edit:
I copied my code here I am selection images from bootstreap model and images are shown at <div id="dropzone-previews"></div> which is behind the model.
I have included the code but it is not showing problem which i am fetching at my local host.

Categories