3

Is there a way for enabling file upload via file path?

The default HTML file upload control displays a disabled textbox and a button. Is it possible via JS or something to upload a file when the user pastes the path to the file into a textbox?

This webpage is within a corporate intranet.

schlingel
  • 8,560
  • 7
  • 34
  • 62

3 Answers3

3

No, such thing is not possible in web application using ordinary HTML/JavaScript - period.

The one and only way for user to choose file is via the file dialog opened by clicking the browse button of the <input type="file" /> element.

The only shortcut possible is that JS can open the file dialog automatically, but still - that's the only way for user to choose what file to upload.

Shadow The GPT Wizard
  • 66,030
  • 26
  • 140
  • 208
  • Embedded Java-Applets would work. As I mentioned the page is within a intranet so the permissions for the applet are no problem. But I'm searching/hoping/praying for a nicer solution. – schlingel Jul 05 '11 at 12:35
  • Edited my answer to reflect this.. it's also possible by building your own browser extension, activeX control or server/client program. I was referring to "ordinary" web page. – Shadow The GPT Wizard Jul 05 '11 at 12:37
  • Is there any documentation to proof this is right? – YTG Nov 09 '22 at 08:25
  • @YTG well, these days this might be possible with new features of HTML5, I'll try to look into it and update the answer later. – Shadow The GPT Wizard Nov 09 '22 at 08:33
1

There are some small possibilities to do that within a trusted network. Not exactly the same, but still a very similar question: Local file access with javascript

Community
  • 1
  • 1
Sascha Galley
  • 15,711
  • 5
  • 37
  • 51
0

I have done the file uploading using below code in electron app

  if (window.FormData !== undefined) {
              var formData = new FormData();
              let response = await fetch(path); // give local file path stored at appdata folder
              let data = await response.blob();          
              formData.append("file", new File([data], "YourfileName"))
              let _url = "api/webservice url";
              $.ajax({
                type: "POST",
                url: _url,
                contentType: false,
                processData: false,
                data: formData,
                success: function (result) {              
                  console.log(result);
                },
                error: function (xhr, status, p3, p4) {                  
                  var err = "Error " + " " + status + " " + p3 + " " + p4;
                  if (xhr.responseText && xhr.responseText[0] == "{")
                    err = JSON.parse(xhr.responseText).Message;
                  console.log(err);
                }
              });
            } else {
              alert("This browser doesn't support HTML5 file uploads!");
            }

At server side (C# Code)

var provider = new MultipartMemoryStreamProvider();
await Request.Content.ReadAsMultipartAsync(provider);
    
// extract file name and file contents
var fileNameParam = provider.Contents[0].Headers.ContentDisposition.Parameters
                    .FirstOrDefault(p => p.Name.ToLower() == "filename");
string fileName = (fileNameParam == null) ? "" : ileNameParam.Value.Trim('"');
var divs = fileName.Split('.').ToList();
var ext = divs.LastOrDefault();
byte[] file = await provider.Contents[0].ReadAsByteArrayAsync();
// Here you can use EF with an entity with a byte[] property, or
// an stored procedure with a varbinary parameter to insert the
// data into the DB
var fileVM = new FileViewModel
{
 AttachmentType = AttachmentTypeEnum.File,
 FileName = fileName,
 FileExtension = ext,
 ContentType = MimeMapping.GetMimeMapping(fileName),
 ContentLength = file.Length,
 ContentByte = file,
};
DevXtranet
  • 39
  • 3