Copy files from one folder to another on client side - javascript

I can select two folders as below.
<input type="file" id="file-input-one" webkitdirectory="" directory="">
<input type="file" id="file-input-two" webkitdirectory="" directory="">
I want to copy/move all files from 1st folder to 2nd. I can read files inside first directory as below. I can also get the full path of the second directory as well. How do I copy files?
jQuery(function($) {
$('#file-input-one').on('change', function() {
$.each(this.files, function(i, file) {
//move each file to second folder.
}
})
})

Related

Upload (not read) a .xlsx file from HTML and send it (any way) to a PHP file

I have an .xlsx file and a html file with an < input type="file">. I just need upload it and send it to a php file (with js or any other way).
The php file expects an .xlsx file (for this reason I dont parse the .xlsx.) if I load it direct in the php file, works perfectly but I need to upload through an user interface, in this case an html view.
Regards.
Update:
Now the .html looks like this:
<div class="MainContainerPrice">
<form action="php/excel_to_mysql.php" method="POST">
<input type="file" name="excel" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"/>
<input type="submit">
</form>
</div>
And the .php looks like this:
<?php
include 'simplexlsx.class.php';
$file = $_FILES['excel'];
$xlsx = new SimpleXLSX('pricesExcel.xlsx'); //the file directly uploaded that I need to send from html.
...
?>
But now I have the next error:
Undefined index: excel in ...\excel_to_mysql.php on line 2.
Why doesn't recognize the name?
You need a bit of tweaking in the html and in the PHP part
<div class="MainContainerPrice">
<form action="php/excel_to_mysql.php" method="POST" enctype="multipart/form-data">
<input type="file" name="excel" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"/>
<input type="submit">
</form>
</div>
Note the enctype="multipart/form-data". That's needed to actually send the file.
The in the PHP file
<?php
include 'simplexlsx.class.php';
$file = $_FILES['excel']['tmp_name'];
$xlsx = new SimpleXLSX($file); //the file directly uploaded that I need to send from html.
...
?>
$_FILES['excel']['tmp_name'] contains the full path to the uploaded file, note that you can't rely on the name having the '.xlsx' extension, cause the file gets a random name for security purposes.
I strongly suggest you to use the file from within the temporary directory, and to delete it after use.
If the SimpleXLSXclass needs the '.xlsx' extension to work properly, you can try to add it to the temp file
rename($_FILES['excel']['tmp_name'],$_FILES['excel']['tmp_name'].'.xlsx');

How can we simply upload folder in reactjs?

I am looking here for upload folder in reactjs.I have folder in that doc and docx files are there I just want to upload folder when user click in browse button.where I have to not allowed user for selecting single file. Can someone please give me simple example of folder upload or folder select where user can only select folder not file. Actually I am looking in react-dropzone library but not understanding how can I use this for folder select or upload. If someone can guide me or give me simple example where it showing folder upload example that will be great help.Thanks in Advance.
You can allow folder upload by adding these attributes empty "webkitdirectory directory" into your react-dropzone input.
like this.
<input {...getInputProps()} directory="" webkitdirectory="" type="file" />
by using this user can't select a single file.
its work for me :)
You can allow folder upload by adding theses attributes "webkitdirectory mozdirectory directory" to your input :
<input type="file" webkitdirectory mozdirectory directory />
but you can't disable the user ability to upload only one file.
If you're looking for uploading a folder using d&d I recommend react-uploady:
Its drop-zone supports file and folder drop upload out of the box.
It can even be used to upload child folders recursively:
import Uploady from "#rpldy/uploady";
import UploadDropZone from "#rpldy/upload-drop-zone";
const MyApp = () => (
<Uploady destination={{ url: "my-server.com/upload" }}>
<UploadDropZone
onDragOverClassName="drag-over"
htmlDirContentParams={{ recursive: true }}
>
<span>Drag&Drop File(s) or Folder(s) Here</span>
</UploadDropZone>
</Uploady>
);
Based on Zaif's answer, you can customize a file upload event via the getFilesFromEvent prop, as described in the react-dropzone documentation.
UPDATE:
This is a semplified example taken from the official documentation.
import React from 'react'
import { useDropzone } from 'react-dropzone'
function Plugin(props) {
const {acceptedFiles, getRootProps, getInputProps} = useDropzone({
getFilesFromEvent: event => myCustomFileGetter(event)
})
return (
<section className="container">
<div {...getRootProps({className: 'dropzone'})}>
<input {...getInputProps()} />
<p>Drag 'n' drop some files here, or click to select files</p>
</div>
</section>
)
}
export default Plugin
async function myCustomFileGetter(event) {
const files = []
// Retrieves the files loaded by the drag event or the select event
const fileList = event.dataTransfer ? event.dataTransfer.files : event.target.files
for (var i = 0; i < fileList.length; i++) {
const file = fileList.item(i)
files.push(file)
}
// files returned from this function will be acceptedFiles
return files
}

Javascript: Get the value of attributes of "FORM " which is created in .html to external .js file

I have written the small html code where javascript/jquery is inserted inside the tag. This approach works fine.
Now I want to divide this single file into ".html" & ".js". Where I want to separate all javascript/jquery coding part into ".js"
But the problem here I faced is that I am not able to read the values(in ".js") of any field which I have created in ".html"
Example
test.html:
<form name="attachlaunchform" id="attachlaunchform" class="form">
<input type="text" name="serial_number" id="serial_number" maxlength="16">
test.js:
serial_num=document.attachlaunchform.serial_number.value
I have included source of my external js file also.
But if I put all these in single file in test.html, it works.My query is how can I get the text box or any other value in .js?
Lets say-
Assuming you have number of events in your html file like-
$('element1').click(function(){});
$('element2').keydown(function(){});
$('element1').bind('click mouseover',function(){});
function initFunction(){
//something
}
$(document).ready(function(){
initFunction();
});
You can separate it by making an external .js file(you already trying this)
Standardize this file as an extension not just an external source.
Now separating all above functions in .js file-
(function($){
function events(){
$('element1').click(function(){});
$('element2').keydown(function(){});
$('element1').bind('click mouseover',function(){});
}
function initFunction(){
//something
}
$(window).on('load',function(){
events();
initFunction();
});
});
and then simply use this file in your html file.

upload a file without having the submit button in mvc

I want to upload a file without using the submit button. The file must be uploaded at the moment the user picks it from browse file window.
Now please do provide some ajax code or some jquery to upload the file and also how to delete the file.
Please provide the control view for this.
View>>>
<form action="FileUploadPost" method="post" enctype="multipart/form-data">
<label for="file1">Filename1:</label>
<input type="file" name="files" id="file3" />
<label for="file2">Filename2:</label>
<input type="file" name="files" id="file4" />
</form>
Controller>>>
[HttpPost]
public ActionResult Index(IEnumerable<HttpPostedFileBase> files)
{
foreach (var file in files)
{
if (file.ContentLength > 0)
{
var fileName = Path.GetFileName(file.FileName);
var path = Path.Combine(HttpContext.Server.MapPath("~/App_Data/Uploads"), fileName);
file.SaveAs(path);
}
}
return RedirectToAction("Index");
}
You can use JQuery file uploader control for your requirements.
It provides functionality to upload file with both "By Clicking on the button" and "Auto Upload".
Auto Upload : This functionality will upload file as soon as you select the file.
See Ajax File Upload for step by step implementation.

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

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.

Categories

Resources