4

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.

3 Answers 3

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.

Sign up to request clarification or add additional context in comments.

4 Comments

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.
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.
Is there any documentation to proof this is right?
@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.
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

Comments

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,
};

1 Comment

This should work only for files that came with the library, not local files.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.