how to set upload button in dropzone.js - javascript

I am using dropzone.js as per my requirement.
I want to use div as file upload control like when user drag & drop a file in the div it should show uploaded files and when user click "submit" button , it should go to server, next other stuff.
But here I am facing problem like, with Form only it is working, when i am uploading a file it is directly going to server with file, i have written like
<form action="~/Employer/GetFile" method="post" enctype="multipart/form-data" class="dropzone" id="dropzoneForm" style="width: 50px; background: none; border: none;">
<div class="fallback">
<input name="file" type="file" />
<input type="submit" value="Upload" />
</div>
</form> // Working Fine ,
<div class="watermark pull-left margin-top-1 dropzone" id="divDropFile"></div> // Not wroking,
it should upload file(s) only like dropzone.js without destination urls, it should go to server when click on file upload button only. Moreover, file drop is not working.
Please help me anyone.. if it is not possible without form submit, please give any suggestion for alternative solution.

I am not on my development computer so I can't try it out, but there are two things that might help.
1) The div that you want to serve as the dropzone hot spot should not have the class dropzone. It needs the class dz-message. Write it like this:
<div class="watermark pull-left margin-top-1 dz-message" id="divDropFile" data-dz-message></div>
2) If you don't want it to automatically send the file to the server, you need to add autoProcessQueue = false in your Dropzone.options object. You will then need to manually call myDropzone.processQueue() later to upload the files.

Related

When creating a user file upload button how can I choose the folder in which I want the file to be uploaded?

<div class="fileupload">
<button class="button">+</button>
<input type="file" name="myfile" id="filebutton"
accept="image/png" enctype="multipart/form-data"/>
</div>
What attribute should I add in my code in order to choose where the file uploaded by the user is saved in the code folder.
Following this tutorial, using PHP you can do this :
$dest=__DIR__.'/uploads/'.$upload_file_name;
and replace the path by whatever you want.
(this code comes from The complete PHP script so far section)

File Upload Issue in HTML

Once I upload a file through input type, it then gets disabled, can't upload another file until the page is refreshed. I don't want to upload multiple files at once, but one after the other. Then click on submit.
My code:
<i class="fa fa-video-camera"></i>
<span>
<input type="file" id="video-dancing" name="postVideo" accept="video/*">
</span>
https://daveismyname.com/upload-multiple-files-with-a-single-input-with-html-5-and-php-bp
hope this would help your problem .
Once the first upload is complete, simply add code to refresh the page.
use attribute multiple to select multiple files.
<input type="file" id="video-dancing" name="postVideo" accept="video/*" multiple >

How to copy selected file into folder using javascript

I want to store/copy file into folder using JavaScript. file is getting from input type file. .
JavaScript Code -
function submitForm(action)
{
// here I want to do copy file into folder
}
HTML Code-
<form id="exampleForm" method="post" action="" enctype="multipart/form-data" >
<input type="file" class="upload" name="imagename" id="imagename" />
<input type="button" name="save_exit" id="save_exit" onclick="submitForm('add_question_sql.php')" value="Save & Exit" />
</form>
I can not use Submit button for some reason.
So how can I copy a file into folder using JavaScript ?
As commented by Paulo, this is not a JavaScript topic. On selection of a file and submission of the form, your server-side application will receive the request and will be in a position to receive the uploaded file and store it somewhere on your server.
Since javascript is Client-side language . so its not possible using javascript.
U have to use any backend technology. like php, java, node.

Upload File - Customizing Html

How can I do to browse my files when i click in a button "Upload" ?
I need to create a hidden file input?
More Explain:
I can't edit css of input type file of my html forms. So in each browser I have a different layout. I don't want it. I want to customize my form.
I created a button. When I click on the button, I want to appear the file selection screen.
When I select the file and press ok , I want to put the path string of my file in the input that I created.
Could you provide more information? You need to use the file html form element.
The file element lets you browse your local documents naturally.
To process the file attachment you need to know a programming language like php
I solved my problem with this code:
<div class="input-append">
<label for="showpath">File Upload:</label>
<input id="showpath" type="text" onclick ="javascript:document.getElementById('CommentFile').click();"/>
<button type="button" onclick ="javascript:document.getElementById('CommentFile').click();"></button>
<input type="file" name="data[Comment][file]" id="CommentFile" style='visibility: hidden;' onchange="updateInput(this.value,'showpath')"/>
</div>
<input type='file' />
More info at w3schools.

Automatically submitting a form when an upload file is chosen

I have a HTML page with the following input tag:
...
<input type="file" id="browseContactImageButton" />
...
Clicking the button on the page results in Open File Dialog. If I want to do the actual uploading, I need another button to click (submit), because this input file button is used just to provide the path to the file.
Is it possible to click the browse button, select the file and to start the uploading function immediately after the file has been chosen? If yes, could anyone provide the code snippet? Thanks.
If you want the form to submit after the user has made their selection, then simply add
<input type="file" onchange="this.form.submit();" ..... >
I had the same requirement.
I figured out to use onchange event of fileupload control to fire c# method.
But I'm getting FileUpload1.HasFile property always 'False' and file name was not set yet.
My markup:
<asp:FileUpload ID="FileUpload1" runat="server" ClientIDMode="AutoID"
ViewStateMode="Enabled" onchange="UploadImage();"/>
any suggessions?

Categories