How just select directory not file? - javascript

I using js to create my form, my problem is how to just select directory, not file?
Belows is my coding:
const realFileBtn = document.getElementById("real-file");
const customBtn = document.getElementById("custom-button");
const customTxt = document.getElementById("custom-text");
customBtn.addEventListener("click", function() {
realFileBtn.click();
});
realFileBtn.addEventListener("change", function() {
if (realFileBtn.value) {
customTxt.innerHTML = realFileBtn.value;
} else {
customTxt.innerHTML = "No file chosen, yet.";
}
});
<input type="file" id="real-file" hidden="hidden" />
<button type="button" id="custom-button">CHOOSE A FILE</button>
<span id="custom-text">No file chosen, yet.</span>
Below is my output:
Actually I want the output not to select the file, just select the folder, because the next step I need store file in this folder directory.
If success the output is folder directory name is:
C:\Staff Import Folder\Source
Hope someone can help me solve this problem. Thanks.

In newest browsers, you can select a directory content with the webkitdirectory attribute of the <input type="file"> element, as being defined by Files and Directories entries API, but I fear this will be deceptive to you since it will only select all the files in this directory (and its sub-folders). There is currently no way to navigate this directory from here.
We should be able to navigate such directory, by looking at the webkitEntries IDL attribute, but currently browsers only populate this from a drop event. You can see a demo in this Q.A.
inp.onchange = (e) => {
console.log( inp.webkitEntries ); // []
console.log( [...inp.files].map( file => file.name ) );
};
<input type="file" webkitdirectory id="inp">
But even then, while you'll be able to navigate that directory, you still won't be able to set anything on the FileSystem. Web scripts simply don't have the authorization to write anything on the disk, except in sand-boxed areas like IndexedDB.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory
document.getElementById("filepicker").addEventListener("change", function(event) {
let output = document.getElementById("listing");
let files = event.target.files;
for (let i = 0; i < files.length; i++) {
let item = document.createElement("li");
item.innerHTML = files[i].webkitRelativePath;
output.appendChild(item);
};
}, false);
<input type="file" id="filepicker" name="fileList" webkitdirectory multiple />
<ul id="listing"></ul>

Related

How to modify the file name of <input type="file"/> with jquery?

I use this code to modify input type="file" file name.
html:
<input type="file" id="videoUpload"/>
js:
var fileName = $("#videoUpload").prop("files")[0].name;
console.log(a) //testA.mp4
$("#videoUpload").prop(("files")[0].name,"myVideo.mp4")
console.log(a) //testA.mp4
The file name is not changed,why?
What you could do is before the form is submitted, copy the file, rename it and replace it. (assuming your input has name=inputName)
yourFormElement.addEventListener("formdata", ({formData}) => {
const file = formData.inputName.files[0];
const blob = new Blob([file],{type: file.type});
const file2 = new File([blob], "foo.bar", {type: blob.type});
formData.set("inputName", [file2]);
});
But as Quentin said, this is something that you usually have to do on the server because anyone can open the devtools do the changes from above and override other users files on the server.

How to upload, rename and download files?

I would like to rename some (ok, I admit - unfortunately quite a few) of my files (png's). I haven't found a suitable program and I'm sure that the whole thing must be possible with html+js as well.
My idea is to upload several files at once and rename them using a table (see below).
The snippet is everything, how far I have come so far, because obviously my code doesn't really work: The files are damaged after the download and moreover not in a single folder, but as many different files.
let table = {
"file0": "myFirstFile",
"file1": "mySecondFile",
"file2": "myThirdFile",
"file3": "myLastFile"
}
Renaming "file0.png" -> "myFirstFile.png", and so on...
let table = {
"test1.png": "new1",
"test2.png": "new2"
}
$("input[name='file']").on("change", function() {
for (let i = 0; i < this.files.length; i++) {
let blob = this.files[i].slice(0, -1, 'image/png');
let oldName = this.files[i].name;
let newName = table[oldName.substr(0, oldName.lastIndexOf("."))] + ".png"
let file = new File([blob], newName, {
type: 'image/png'
});
download(file)
}
})
function downloadURI(file) {
var link = document.createElement("a");
link.download = file;
link.href = file;
link.click();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Run as Webserverver <b>python -m SimpleHTTPServer 8000</b><br> -------------------------
<br><br> Select files: <input type="file" name="file" multiple>
<br>
<a onclick="saveFiles()" style="color: blue">Download images</a>
Any help would be really appreciated.

Get path of upload multiple files

I have a file upload button, and I want to get the path of selected file.
Here's my code:
var pniotApp = angular.module('pniotApp', []);
pniotApp.controller('pniotCtrl', function ($scope, $http, $location) {
var temp = [];
Array.prototype.push.apply(temp, element.files);
for (i = 0; i < temp.length;i++)
$scope.fileBuffer.push(temp[i])
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body dir="rtl" ng-app="pniotApp" ng-controller="pniotCtrl">
<input id="uploadFile" type="file" class="filestyle" data-classButton="btn btn-primary" multiple data-input="false" data-classIcon="icon-plus" onchange="angular.element(this).scope().fileSelected(this)" data-buttonText="uplaod...">
</body>
Note: I'm using 'temp' because element.files doesn't behave like an normal array.
How can I get the relative path of the files?
I tried to do this
document.getElementById("uploadFile").value
But I get just the path of the first file.
What can I do?
You can't access the path for security reasons but since you are satisfied with .value for a single entry, I will assume you mean the file name.
A file input will have a files property that contains a list of the selected files (you can loop over it like an array). The objects inside each have a name property that will give you the file name.
document.querySelector("input").addEventListener("change", list_files);
function list_files() {
var files = this.files;
for (var i = 0; i < files.length; i++) {
console.log(files[i].name);
}
}
<input type="file" multiple>

multiple FileUpload display file path as text [duplicate]

This question already has answers here:
How to get full path of selected file on change of <input type=‘file’> using javascript, jquery-ajax?
(14 answers)
Closed 6 years ago.
I have a select choice of files to upload can be single or multiple
as I select I would like to have a text below stated the path of the files I have selected.
<form action="mymethod" enctype="multipart/form-data" method="Post" id="submitForm">
<input id="file" name="file[]" multiple type="file">
Upon selecting the file let say its 3:
it will show on the screen:
however currently it is showing:
here is my script:
<script>
var selDiv = "";
document.addEventListener("DOMContentLoaded", init,
false);
function init() {
document.querySelector('#file').addEventListener(
'change', handleFileSelect, false);
selDiv = document.querySelector("#selectedFiles");
}
function handleFileSelect(e) {
if (!e.target.files)
return;
selDiv.innerHTML = "";
var files = e.target.files;
for ( var i = 0; i < files.length; i++) {
var f = files[i];
selDiv.innerHTML += f.name + "<br/>";
}
}
</script>
Prehaps you guys could give me suggestion on how I would tackle this issue?
You won't be able to access this via JavaScript; as a security precaution the browser will expose the file name to you, but nothing else about the local file system.
This is a built in security measure by the browser creators, so private information about local file paths cannot be seen.

Handling multiple files from an input element in an array with Google Apps Script

I have a form, which allows to select an item from a dropdown list and upload a file. The name and the ID of the item are saved in a Spreadsheet document. Works with one file...but I want to upload multiple files. Could you help me fixing the script?
The HTML part looks like this
<div class="col-md-4 col-sm-6 ">
<div class="caption">
<h3>Bildauswahl</h3>
<p align="center"><input type="file" name="myFiles[]" id="myFiles" multiple></p>
</div>
</div>
My script, which is not working, is the following:
var dropBoxId = "XYZ";
var logSheetId = "ABC";
function doGet(e) {
return HtmlService.createHtmlOutputFromFile('InputForm.html');
}
function uploadFiles(formObject) {
try {
// Create a file in Drive from the one provided in the form
var folder = DriveApp.getFolderById(dropBoxId);
var input = document.getElementById('myFiles');
for (i = 0; i<input.files.length; i++) {
var blob = input.files[i];
var file = folder.createFile(blob);
var ss = SpreadsheetApp.openById(logSheetId);
var sheet = ss.getSheets()[0];
sheet.appendRow([file.getName(), file.getUrl(), formObject.myName]);
}
// Return the new file Drive URL so it can be put in the web app output
return file.getUrl();
} catch (error) {
return error.toString();
}
}
Thanks.
As of right now you have to use a work around to work with multiple files. The multiple attribute only works in IFRAME mode, but file inputs are broken in IFRAME mode.
To see this workaround take a look at the bug submission for this issue:
https://code.google.com/p/google-apps-script-issues/issues/detail?id=4610
Also in your code you have some mixing of server side and client side code that will not work:
var folder = DriveApp.getFolderById(dropBoxId); //server side
var input = document.getElementById('myFiles'); //client side
You will need to do your multiple file processing on the client side
I came up with a nice solution for multi-file uploading. Limitations are files must be under 10 MB.
CODE.GS
function doGet() {
return HtmlService.createHtmlOutputFromFile('index').setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
function saveFile(data,name,folderId) {
var contentType = data.substring(5,data.indexOf(';'));
var file = Utilities.newBlob(Utilities.base64Decode(data.substr(data.indexOf('base64,')+7)), contentType, name);
DriveApp.getFolderById(folderId).createFile(file);
}
index.html
<div>
<input type="file" id="myFiles" name="myFiles" multiple/>
<input type="button" value="Submit" onclick="SaveFiles()" />
</div>
<script>
var reader = new FileReader();
var files;
var fileCounter = 0;
var folderId = "";
reader.onloadend = function () {
google.script.run
.withSuccessHandler(function(){
fileCounter++;
postNextFile();
}).saveFile(reader.result,files[fileCounter].name,folderId);
}
function SaveFiles(){
var folderSelect = document.getElementById("folderSelectId");
folderId = folderSelect.options[e.selectedIndex].value;
files = document.getElementById("myFiles").files;
postNextFile();
}
function postNextFile(){if(fileCounter < files.length){reader.readAsDataURL(files[fileCounter]);}else{fileCounter=0;alert("upload done")}}
</script>

Categories