Anyway to bind an upload from multi upload box to input file? - javascript

I am using the Drag and drop Multi Importer script I found online, below my div containing the drag and drop is an input type="file"..
Currently if you click the Browse files button from the input and add an image then it shows in the Multi Upload div (and of course the input file section as well) However not everyone is going to use the browse files button, they are going to drag and drop so is there a way to reverse this behavior? Where when the client drags a file in the multi upload div it will show in the input file tag as being added?
I hope I wasn't too confusing there.
Here is what I have:
<div id="dragAndDropFiles" class="uploadArea">
<h1>Drop Images Here or Click to Upload</h1>
</div>
<input type="file" name="thumbnail" id="thumbnail" multiple />
<script type="text/javascript">
var config = {
support : "image/jpg,image/png,image/bmp,image/jpeg,image/gif", // Valid file formats
form: "primaryPostForm", // Form ID
dragArea: "dragAndDropFiles", // Upload Area ID
}
jQuery(document).ready(function($){
initMultiUploader(config);
$('.button').click(function () {
$('#primaryPostForm').submit();
});
$('#dragAndDropFiles').bind("click" , function () {
$('input#thumbnail').click();
});
});
</script>
Ultimately it would be great just to hide the input file type section but still have it in my markup because I have other functions that take that file and create products from it.

Related

Attaching default image on Choose FIle

I've been looking and struggling to find the answer how to attach a default image on "Choose File" using JS/Jquery. My goal is if the user forgot to attach an image, I want to have some image url on default. So that if the user clicks the submit button, that default image will be uploaded instead. I know this is inefficient way to do this, I just want to know how you can manipulate the file that is being uploaded.
<html>
<body>
<input type="file"/>
<input type="submit">
</body>
</html>
You can add an event listener for the submit button, and first check if user selected any file
<input id="get-file" type="file">
<input id="submit-file" type="submit">
<script>
const inputField = document.querySelector('#get-file');
const submitButton = document.querySelector('#submit-file');
submitButton.addEventListener('click', function() {
// This is where you check whether user uploaded a file or not
if (!inputField.value) {
// Operate on the default file if user doesn't provide any
// Make sure you exit the function
return;
}
// User uploaded a file so operate on it here
});
</script>

previous file is being disappear when clicking input type file

I am creating a web app in which I want to allow my users to select multiple files,
when my user select multiple files at a time it is working fine but when the user re-select again the previous files disappear,
here is my input field
<input type="file" id="uploadMultipleFiles" multiple />
I want my user to select multiple file and allow them to click multiple time without loosing the previous file selection
here is a JSFiddle for reference,
I can use javascript or jquery if necessary
Hope I explain this question properly
You can get that working using the JavaScript. You have to push the selected file in an array. when the user submit the form, you have to send the files to the server using ajax.
var input = document.getElementById('uploadMultipleFiles');
var btn = document.getElementById('btn');
var allFiles = [];
input.addEventListener('change', function(evnt){
for(var i=0; i<input.files.length; i++){
allFiles.push(input.files[i])
}
})
btn.addEventListener('click', function(evnt){
console.log('Loading Files')
allFiles.forEach( function(file){
console.log(file.name)
})
})
<input type="file" id="uploadMultipleFiles" multiple />
<br><br><br>
<button id="btn">
Console All Files
</button>

In HTML, how can I build a file picker that can change the image displayed without using action listener?

This is what I have in HTML:
<img src="images/defaultProfile.jpg" id="image">
<input type="file" name="pic" accept="image/*" id="imgPath">
<input type="submit" onclick="uploadImg()">
The image with an id of "image" automatically loads a default image from a designated directory by default. Then, the user can I pick an image from the file picker. When the user hits the submit button written on the last line, The uploadImg() written on javaScript file will get the image from input and change the image displayed.
But, my question is how I can enable the user to change the image by just picking a image file from the directory without hitting the "submit" button.
You can add a change listener to the image input:
document.querySelector('#imgPath').onchange = () => {
console.log('Now uploading...');
// uploadImg();
};
<input type="file" name="pic" accept="image/*" id="imgPath">
Take a look at this Why can't I do <img src="C:/localfile.jpg">?. If your plan is to display an image before uploading to the server, that is not going to work. What you can do is write an "onchange" event (https://www.w3schools.com/jsref/event_onchange.asp) to your file selection input line (2nd line in your code), and upload it to a temporary directory and display it. As the user clicks on the upload button, you can make the change permanent. If the user cancels, you will display the default profile page.

NIghtwatch.js File Upload with Dropzone.js

I am trying to upload a pdf file on our file upload using nightwatch.js but the thing is there are no input type="file" on our upload. The html looks like this:
<form id="dropzone" action="/v2/asset/56013895934fd606006fb314" class="dropzone dz-clickable">
<div class="dz-clickable" id="dropzonePreview">
<i class="fa fa-cloud-upload main-icon initial-icon"></i>
</div>
<div class="dz-default dz-message">
<span>Drop a file here or click icon above to upload an image</span>
</div>
</form>
I tried sending keys to the form, div and i but to no avail it wont work. This is my code on how i try upload the file:
var uploadInvoice = function(browser) {
browser
.waitForElementPresent(dashboardselector.view_assignment, 20000)
.click(dashboardselector.view_assignment)
.waitForElementVisible(".fa-plus", 20000)
.click(".fa-plus")
.click(".regionBillAsset > div:nth-child(1) > a:nth-child(1)")
.setValue("#dropzone", require('path').resolve(__dirname+'/document.pdf'))
.waitForElementVisible(".after-success", 20000)
.click(".after-success")
};
the upload starts on the setvalue part of my code. The upper part are just steps to go to the upload modal. Thanks in advance!!
UPDATE
I have found a hidden input field on the html but even though I use setValue, it won't upload my file.
I am using Dropzone.js for uploading file. It makes the input type="file" to hidden. And nightwatch.js does not setValue on hidden element so we need to visible the input element before setting value.
Solution is
step 1: make that hidden input element visible
step 2: set value to that input element
below is my functional test case for uploading image.
'uploadin the image': (browser) => {
browser
.execute("document.querySelectorAll('input[type=file]')[0].style.display = 'block';")
.pause(100)
.setValue('//div[#id="Upload Icon"]/input[#type="file"]', require('path').resolve(__dirname + '/categoryIcon.png'))
.waitForElementVisible('//div/span[text()="Change Icon"]', 5000)
.assert.containsText('//div/span[text()="Change Icon"]', 'Change Icon')
.pause(2000)
.end();
}
execute is changing the style of input element from none to block.
Here is the documentation link http://nightwatchjs.org/api#execute
.execute("document.querySelectorAll('input[type=file]')[0].style.display = 'block';")
document.querySelectorAll('input[type=file]') will return the array of elements and in my case i need element on the 0th position so i added [0] at the end of querySelectorAll.
Note: You can also run this JavaScript code on the console to see if it is selecting the right element.
.setValue('//div[#id="Upload Icon"]/input[#type="file"]', require('path').resolve(__dirname + '/categoryIcon.png'))
In my case there is a div with id="Upload Icon" which has input with type="file"
You can make it visible like this >
client.execute(function(data){
document.querySelector('input[type="file"]').className="";
}, [], function(result){
console.log(result);
});
after this you can set your value for upload.
as of Dropzone v3.12.0 (note: the newest version is v5.4.0)
You can do this in nigthwatch.js to upload a file.
browser
.execute(`
// this makes the DropZone hidden input, visible
document.querySelector('input[type="file"]').style.visibility = "visible";
`)
.setValue('input.dz-hidden-input', AbsolutePathToFile)

Uploading multiple single files using separate Dropzones in one form

I have a form where you can continually add more rows.
One row contains name and avatar, etc.
I want to use Dropzone.js to make each avatar a different droppable field.
Whenever I create a new row, I'm creating a new Dropzone area. This is fine, and works.
However, when I submit the form, the files are nowhere to be found. I can understand why, because the file fields aren't in the form, they are appended to the body.
<form>
<div class="person" id="person_1">
<div class="avatar"></div>
<input type="text" name="name_1" />
</div>
<!-- then these are added via js -->
<div class="person" id="person_2">
<div class="avatar"></div>
<input type="text" name="name_2" />
</div>
<div class="person" id="person_3">...</div>
<div class="person" id="person_4">...</div>
<!-- etc -->
</form>
I'm initializing the dropzone on the avatar div.
Is it possible to add them to file fields inside the form?
Here's what's going on in the JS. It's dumbed down a little for brevity.
(function(){
var count = 1;
var $form = $('form');
initDropzone( $('#person_1') );
function addPerson() {
count++;
var $personDiv = $('<div class="person" id="person_'+count+'">...</div>').appendTo($form);
initDropzone( $personDiv, count );
}
function initDropzone( $el, count ) {
$el.find('.avatar').dropzone({
autoProcessQueue: false,
uploadMultiple: false,
parallelUploads: 100,
maxFiles: 1,
url: '/' // dropzone requires a url param
});
}
$('#add_person').on('click', addPerson);
})();
The problem is not that the fields are appended to the body, but that the whole Dropzone uploading process is different from a normal form submission.
You can not use Dropzone to drop files in the browser, and then use the normal form submit to submit it.
There are two ways to accomplish what you are doing:
Don't let the user submit the form until all your files in the Dropzones have uploaded (or better yet: create event listeners on all your Dropzones that will fire the submit function on the form as soon as all Dropzones have uploaded). You need to store the files on your server and wait for the actual form submission to assemble the data.
This is by far the most elegant solution, because this way the files are already uploading while the user may still be editing form data.
Create one Dropzone on the actual form, that will handle the whole uploading of the form via AJAX. (See the docs for that). If you want different dropzone targets inside that dropzone, you'll have to create them separately, and "delegate" the file drops to the main dropzone (basically, just take the file object, and add it to the main Dropzone).

Categories

Resources