How to select Default folder location in File Upload Control? - javascript

I want to set the default path folder location has to be opened, Once I press the "browse" button in File Control. Please Help me.

This forum says it can't be done.
You are wanting to control the directory location that the browse
starts in and not the save path the file is uploaded to, correct?
I could be wrong but since the server never knows the file structure
of the client machine, the developers of that control probably did not
provide for that functionality.

COPIED: How to set physical path to upload a file in Asp.Net?
To use a folder outside of the application:
//check to make sure a file is selected
if (FileUpload1.HasFile)
{
//create the path to save the file to
string fileName = Path.Combine(#"E:\Project\Folders", FileUpload1.FileName);
//save the file to our local path
FileUpload1.SaveAs(fileName);
}
Of course, you wouldn't hardcode the path in a production application but this should save the file using the absolute path you described.
With regards to locating the file once you have saved it (per comments):
if (FileUpload1.HasFile)
{
string fileName = Path.Combine(#"E:\Project\Folders", FileUpload1.FileName);
FileUpload1.SaveAs(fileName);
FileInfo fileToDownload = new FileInfo( filename );
if (fileToDownload.Exists){
Process.Start(fileToDownload.FullName);
}
else {
MessageBox("File Not Saved!");
return;
}
}

Related

Pdf file not created using react-native-html-to-pdf

I am using React Native v0.67.2 and looking to generate PDF from HTML using react-native-html-to-pdf. This is the function I use to generate the PDF, but the location of generated Pdf isn't showing in the iOS file manager.
const createPDF = async () => {
let options = {
html: '<h1>PDF TEST</h1>',
fileName: 'testFile',
directory: 'Documents',
};
let file = await RNHTMLtoPDF.convert(options);
// console.log(file.filePath);
alert(file.filePath);
}
The file exists in an unknown location, but I'm expecting the downloaded PDF file in the 'Documents' directory of iPhone Files. How do I move the PDF to this location and resolve this issue?
Thank you in advance.
Duplicate of:
pdf created by react native html to pdf is not showing in provided path
On IOS you can only use that Documents path that you already have.
You cannot make it save anywhere else.
Directory where the file will be created (Documents folder in example above). Please note, on iOS Documents is the only custom value that is accepted.
Ref: https://github.com/christopherdro/react-native-html-to-pdf#options

How do you download an image which filename does not end with an extension?

If you right-click on any profile image on Github and open image in new tab you will see that it doesn't end with an extension
For example, here's the actual image of a user on github:
https://avatars0.githubusercontent.com/u/170270?s=60&v=4
Goal
I'm trying to add image saving functionality to my node.js app using request module:
// A proper image link (e.g. *.jpg)
let fileUrl_1 = "https://cdn.pixabay.com/photo/2016/06/20/03/15/pier-1467984_1280.jpg"
// Semi proper image link (e.g. *.jpeg?query)
let fileUrl_2 = "https://images.pexels.com/photos/371633/pexels-photo-371633.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
// Not a proper image link (e.g. filename[no extension]?query)
let fileUrl_3 = "https://avatars0.githubusercontent.com/u/170270?s=60&v=4"
let parsedPath = pathModule.parse(fileUrl_1)
let fileName = parsedPath.base
let destinationPath = `C:\\test\\${fileName}`
let request = require("request")
request
.get(fileUrl_1)
.on('error', function(err) {
console.log(err)
})
.pipe(fs.createWriteStream(destinationPath))
Problem
When I try to download images with normal paths like fileUrl_1 it works fine, but if I try to download images like fileUrl_2 or fileUrl_3 shown above I get an error:
ENOENT: no such file or directory, open 'C:\test\170270?s=60&v=4'
BUT, if you just right-click / save image as on a "problematic" image in any browser, you will get a save as dialog window and will be able to save this image as 170270.jpg
Question
How do you download any image with node.js like the save as dialog window does (retrive the image even if it doesn't end with a proper extension)?
It's entirely up to you to choose the destination filename, based on whatever you want. There is no problem in retrieving the image - your only problem is you are trying to save it with an invalid filename.
The server response may include a Content-Disposition header, which may include a recommended default filename.
The filename is always optional and must not be used blindly by the application: path information should be stripped, and conversion to the server file system rules should be done.
It should also include a Content-Type header from which you can derive a file extension, however this header may be incorrect.
Browsers will do MIME sniffing in some cases and will not necessarily follow the value of this header
Or you can "sniff" the first few bytes of the response body and check for a known magic number to indicate the file type.
pathModule.parse is designed to parse file paths, not URLs.
The examples you have where it fails to provide a valid filename are those with a ? in them.
Use a URL parser instead.
const url = require('url');
var fileName = url
.parse(
'https://images.pexels.com/photos/371633/pexels-photo-371633.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'
)
.pathname.match(/\/([^\/]*)$/)[1];
console.log(fileName);

How to save an Image object into a file in Android with Phonegap?

Here's the thing, I generate a PNG image in the application and I get an Image object with JavaScript, something like this...
var img = new Image();
img.src = 'data:image/png;base64,' + base64Img;
I want to save that image to the internal storage. Is there a plugin or a way I can do this?
According THIS QUESTION:
This is file download code which can be used by anyone. You just have three parameters to use this like-
1) URL
2) Folder name which you want to create in your Sdcard
3) File name (You can give any name to file)
All types of file can download by using this code. you can use this as .js
And this works on IOS also.
First step check parameters mismatch and checking network connection if available call download function
Second step to get Write permission and Folder Creation
Third step for download a file into created folder
Also check this link
function onPhotoDataSuccess1(imageData) {
alert(imageData);
sessionStorage.setItem("img_api",imageData);
$('#largeImage').attr('src','data:image/jpeg;base64,' + imageData);
}
Hope, it will helps you!

Can I get upload path at runtime?

I need to get upload path of my uploaded files via jquery-file-uploader.
$('.new_plotphoto').fileupload({
done: function (e, data) {
var filess = data.files[0];
var filename = filess.name;
var filepath = filess.filepath;
console.log(filename); // this shows filename
console.log(filepath); // this shows undefined
}
});
Path of uploading file is a secure feature. From W3C File API docs about file name:
The name of the file; on getting, this must return the name of the
file as a string. There are numerous file name variations on different
systems; this is merely the name of the file, without path
information.
File path will be enabled only then you upload directory:
<input type=file multiple directory webkitdirectory onchange="console.log(this.files)">
In this case webkitRelativePath(for WebKit browsers) field of file object will be not empty. But it will show path only inside uploaded directory.
Also note that iOS browsers then uploading images always have this file name: image.jpg and no info about path.

Filesystem API - Upload from local drive to local filesystem

Ive read a lot about the filesystem API and HTML5, but i just couldn't find a working solution so i ask you guys:
I want to have a file upload form, drag drop or regular input box doesnt matter, however i want to select a file, and after uploading it should take the file or a whole folder and "upload" it to the filesystem located on the clients computer. The upload is in brackets because i actually want to copy the file/folder to the clients local file system.
Is it even possible? Because i want to make an application, where a user can upload his files such as music or large videos and movies to his local filesystem and edit/watch etc them in my application. I know i have to upload those big files i have to cut them into pieces and load them stacked up, but i just want to start little :)
Thanks in advance
There's indeed little information on this subject at the moment, so I put together an example that combines:
Using the webkitdirectory attribute on <input type="file">.
This allows the user to select a directory using an appropriate dialog box.
Using the Filesystem API.
This is about the sandboxed filesystem which allows you to store files on the client's machine.
Using the File API.
This is the API that allows you to read files. The files are accessible through an <input type="file"> element, through a transfer using drag and drop, or through the Filesystem API.
As these are currently only working nicely in Chrome, I used the webkit prefix where necessary.
http://jsfiddle.net/zLna6/3/
The code itself has comments which I hope are clear:
var fs,
err = function(e) {
throw e;
};
// request the sandboxed filesystem
webkitRequestFileSystem(
window.TEMPORARY,
5 * 1024 * 1024,
function(_fs) {
fs = _fs;
},
err
);
// when a directory is selected
$(":file").on("change", function() {
$("ul").empty();
// the selected files
var files = this.files;
if(!files) return;
// this function copies the file into the sandboxed filesystem
function save(i) {
var file = files[i];
var text = file ? file.name : "Done!";
// show the filename in the list
$("<li>").text(text).appendTo("ul");
if(!file) return;
// create a sandboxed file
fs.root.getFile(
file.name,
{ create: true },
function(fileEntry) {
// create a writer that can put data in the file
fileEntry.createWriter(function(writer) {
writer.onwriteend = function() {
// when done, continue to the next file
save(i + 1);
};
writer.onerror = err;
// this will read the contents of the current file
var fr = new FileReader;
fr.onloadend = function() {
// create a blob as that's what the
// file writer wants
var builder = new WebKitBlobBuilder;
builder.append(fr.result);
writer.write(builder.getBlob());
};
fr.onerror = err;
fr.readAsArrayBuffer(file);
}, err);
},
err
);
}
save(0);
});
$("ul").on("click", "li:not(:last)", function() {
// get the entry with this filename from the sandboxed filesystem
fs.root.getFile($(this).text(), {}, function(fileEntry) {
// get the file from the entry
fileEntry.file(function(file) {
// this will read the contents of the sandboxed file
var fr = new FileReader;
fr.onloadend = function() {
// log part of it
console.log(fr.result.slice(0, 100));
};
fr.readAsBinaryString(file);
});
}, err);
});
That is not possible, exactly, but your app can still probably work. Reading the file is possible through a file input form element, but writing the file back to disk is where you'll run into trouble.
The two ways your browser can write to disk are 1) downloading a file and 2) the HTML5 filesystem API. Option #1 obviously doesn't let your application choose the destination and option #2 only works with browser-created sandbox filesystems. That restriction might not be a deal-breaker for you -- it just means that the folders that your app uses will be buried somewhere in your browser's data files.
Also, the Filesystem API is currently Chrome-only (but it is an open standard). If you want cross-platform support, maybe you can use IndexedDB. You could use localStorage, but Chrome has a hard 5MB limit, which would be terrible for a media application.

Categories

Resources