I've integrated dropzone and it's working fine with the files getting uploaded etc. What I'd like to do is hide the progress bar once the upload is successful and replace the filename with a link to the actual upload file automatically. This would happen automatically as each file finished uploading...
Looking at the documentation, I know I should use
this.on("success", function(file, response) {
if (response.success == 'true') {
// hide progress bar '.dz-progress'
// replace .data-dz-name with url from response
}
});
However, I haven't been able to figure out how to get access to that specific html element to replace/hide etc.
Edit: I was able to use css classes from the original dropzone.css to hide/transition the progress bar. Now just need to find a way to replace the filename with an 'a' tag.
For Dropzone 5.x and above
The correct way to update the thumbnail is by modifying the Preview Template in the success callback as follows:
this.on("success", function(file, response) {
// modify the preview template
file.previewTemplate.appendChild(document.createTextNode(response.filePath));
});
Reference tutorial for Dropzone along with server side handling
$('.dz-progress').hide();
or
$(".dz-progress").remove();
and to replace .data-dz-name
$('.data-dz-name').html(url from response);
Related
We currently have code that handles all our image uploads via Dropzone.js. This includes functionality to paste from the clipboard and upload via dropzone.js, which currently works. This is that event code:
document.onpaste = function(event)
{
alert('pasted');
var items = (event.clipboardData || event.originalEvent.clipboardData).items;
for (index in items) {
var item = items[index];
if (item.kind === 'file') {
// adds the file to your dropzone instance
myDropzone.addFile(item.getAsFile());
}
}
}
Following this, we have added a CKEditor (v4.10) html text editor to that page. The CKEditor has its own clipboard handling built in. If you activate the CKEditor (for example by clicking the text area), the CKEditor effectively takes control of the clipboard from that point. Which is correct, because we want the editor to be able to copy and paste text still.
However, CKEditor does not natively have image uploading built into it. It requires a plugin. But we would prefer not to use this plugin, and rather intercept the paste event, and if the data pasted is an image, pass that along to our dropzone.js handler instead.
While I am able to intercept that event, I am not sure what event data (if any) I can extract from the CKEditor paste event to pass along to the Dropzone handler. Here is the code so far:
var editor = CKEDITOR.instances.NoteText;
editor.on( 'paste', function( event )
{
alert('pasted ck');
console.dir(event);
//myDropzone.addFile(item.getAsFile());
} );
I have tried inspecting the event to see if anything is available for me to use, but don't seem to find anything.
Is what I'm trying to accomplish possible? Is it possible for me to somehow find and pass along the pasted event data from CKEditor to DropZone? Or am I going to have to implement the CKEditor image upload plugin?
Thanks.
I have an existing file upload (manual) in my web application. My application already shows existing uploaded files and a way to delete files.
I would like to incorporate the dropzone.js drag and drop into a small target area - but that is all. I don't want dropzone to print/render anything back to the screen - no messages, no images, nothing.
Could someone provide and example of how to configure dropzone for this limited functionality?
You can accomplish this by modifying the stylesheet. For example, setting
.dz-details
{
display:none;
}
will remove the box which shows what was uploaded. By modifying more styles, you should be able to remove the other elements that normally appear.
You can do that on init:
const dropzoneConfig = {
addedfile: file => { console.log(file); }
}
const myDropzone = new Dropzone(myDiv, dropzoneConfig)
I am starting to use dropzone.js and have run into a minor problem. I am able to upload files. I use a modal popup to get the file information.
The problem is when I go back the files I previously uploaded are still in the drop zone (with checkmarks). I want an empty dropzone.
Ideas?
All the answers I've seen involve assigning a variable when you initialize dropzone. If you don't want to do this extra step and already have your dropzone element: You can use Dropzone's forElement method to directly target your dropzone without the need for any variables:
Dropzone.forElement('#myDropzoneElementID').removeAllFiles(true)
Did you tried to call the "removeAllFiles" function of your dropzone object after the upload ?
See documentation : http://www.dropzonejs.com/#dropzone-methods
In the first answer of this post, the solution is also to call the "removeAllFiles" function :
removing all manually added files from Dropzone.js?
If it doesn't solve your problem, please give us more information
With jquery you can make something like this.
var dZUpload = $('#dZUpload).dropzone({
..
})
$('.click').click(function() {
dZUpload[0].dropzone.removeAllFiles();
})
You can call removeAllFiles function to clear dropzone object before upload.So when ever you try to upload something using dropzone it will be always clear.
myDropzone.removeAllFiles();
This may help someone who could not solve the problem because of the next scenario.
When i call removeFile i catch the removedfile event to send the remove request to the backoffice. So when i use removeAllFiles it's not only the preview that is removed but also the file itself from the server.
So I came up with this solution:
//I had the request depending on a flag
this.on("removedfile", function (file, hardRemove = 1) {
if(hardRemove){
// request the server to delete the file
}
});
// I created a new event for visual reset that calls the removedfile event with the
// hardRemove flag disabled, resets the array of files and emits the reset event
// to reset the dropzone initial layout
this.on("resetFiles", function () {
for (let file of this.files) {
this.emit("removedfile", file, 0);
}
this.files = [];
return this.emit("reset");
});
So whenever i want to reset the dropzone i just call the new event:
dropzone.emit("resetFiles");
I have an application that contains a grid and button for the user to be able to export the grid to excel. I want to be able to show the save as dialog box when the server responds with the excel file.The server accepts the parameters as a JSON object. Here is my code:-
Ext.Ajax.request({
url: '/export/excel/',
method: 'POST',
//Send the query as the message body
jsonData: jsonStr,
success: function (result,request) {
Ext.DomHelper.append(document.body, {
tag: 'iframe',
frameBorder: 0,
width: 0,
height: 0,
//src:result,
css: 'display:none;visibility:hidden;height:1px;'
});
}, //success
failure: function (response, opts) {
var msg = 'server-side failure with status code: ' + response.status + ' message: ' + response.statusText;
Ext.Msg.alert('Error Message', msg);
}
});
I know there is a similar question ( ExtJS AJAX save as dialog box) but that references a static file on the server.In my case, depending upon the json sent the result is going to be different each time. I get back the entire excel file that i want in the result.responseText. What needs to be done so that the dialog box popup up asking the user for save as options? Also, im not sure how the src in the domhelper should be configured. Any help would be really appreciated.
I believe the only way to do this in a totally client agnostic way is to force it from the server-side using a Content-Type of: octect-stream and Content-Disposition of 'attachment' with a suggested filename. See:
http://www.w3.org/Protocols/rfc2616/rfc2616-sec19.html#sec19.5.1
and
http://www.ryboe.com/tutorials/php-headers-force-download
You can also use so-called 'dataURIs' but they have their own set of issues:
http://en.wikipedia.org/wiki/Data_URI_scheme
My recommendation would be to return EXCEL content dynamically on the server and just make the button a link to that url that POSTS the current data your working with and sets the correct response headers to trigger your browser to download the file. Since you are doing an AJAX call and not letting the web-browser get the URL directly, any HTTP headers you set to control the way the browser interprets the content won't matter because you are doing it in JS not in the user's browser. By returning the content directly to the user through a link on the server, you'll get around this problem.
Since you actually want the user to click on the link, I don't think AJAX is appropiate here.
I made the server side return the path of the location the file is created and saved, instead of sending the file as an attachment in the response and hence avoiding the problem of setting the headers in the response. Then i just set the source of the iframe in the code to the path that gets returned in the response (result.responseText).
How to "bookmark" page or content fetched using AJAX?
It looks like it can be easy if we just add the details to the "anchor", and then, use the routing or even in PHP code or Ruby on Rails's route.rb, to catch that part, and then show the content or page accordingly? (show the whole page or partial content)
Then it can be very simple? It looks like that's how facebook does it. What are other good ways to do it?
Update: There is now the HTML5 History API (pushState, popState) which deprecates the HTML4 hashchange functionality. History.js provides cross-browser compatibility and an optional hashchange fallback for HTML4 browsers.
To store the history of a page, the most popular and full featured/supported way is using hashchanges. This means that say you go from yoursite/page.html#page1 to yoursite/page.html#page2 you can track that change, and because we are using hashes it can be picked up by bookmarks and back and forward buttons.
You can find a great way to bind to hash changes using the jQuery History project
http://www.balupton.com/projects/jquery-history
There is also a full featured AJAX extension for it, allowing you to easily integrate Ajax requests to your states/hashes to transform your website into a full featured Web 2.0 Application:
http://www.balupton.com/projects/jquery-ajaxy
They both provide great documentation on their demo pages to explain what is happening and what is going on.
Here is an example of using jQuery History (as taken from the demo site):
// Bind a handler for ALL hash/state changes
$.History.bind(function(state){
// Update the current element to indicate which state we are now on
$current.text('Our current state is: ['+state+']');
// Update the page"s title with our current state on the end
document.title = document_title + ' | ' + state;
});
// Bind a handler for state: apricots
$.History.bind('/apricots',function(state){
// Update Menu
updateMenu(state);
// Show apricots tab, hide the other tabs
$tabs.hide();
$apricots.stop(true,true).fadeIn(200);
});
And an example of jQuery Ajaxy (as taken from the demo site):
'page': {
selector: '.ajaxy-page',
matches: /^\/pages\/?/,
request: function(){
// Log what is happening
window.console.debug('$.Ajaxy.configure.Controllers.page.request', [this,arguments]);
// Adjust Menu
$menu.children('.active').removeClass('active');
// Hide Content
$content.stop(true,true).fadeOut(400);
// Return true
return true;
},
response: function(){
// Prepare
var Ajaxy = $.Ajaxy; var data = this.State.Response.data; var state = this.state;
// Log what is happening
window.console.debug('$.Ajaxy.configure.Controllers.page.response', [this,arguments], data, state);
// Adjust Menu
$menu.children(':has(a[href*="'+state+'"])').addClass('active').siblings('.active').removeClass('active');
// Show Content
var Action = this;
$content.html(data.content).fadeIn(400,function(){
Action.documentReady($content);
});
// Return true
return true;
And if you ever want to get the querystring params (so yoursite/page.html#page1?a.b=1&a.c=2) you can just use:
$.History.bind(function(state){
var params = state.queryStringToJSON(); // would give you back {a:{b:1,c:2}}
}
So check out those demo links to see them in action, and for all installation and usage details.
If you use jquery, you can do that in a simple manner. just use ajaxify plugin. it can manage bookmarking of ajax pages and many other things.
Check this, something may help you:
How to change URL from javascript: http://doet.habrahabr.ru/blog/15736/
How to pack the app state into url: http://habrahabr.ru/blogs/javascript/92505/
An approach description: http://habrahabr.ru/blogs/webstandards/92300/
Note: all articles are in Russian, so either Google Translate them, or just review the code and guess the details.
Take a look to the Single Page Interface Manifesto
I tried many packages. The jQuery History plugin seems to be most complete:
http://github.com/tkyk/jquery-history-plugin