Change Name of Uploaded File on Client

Change name of uploaded file on client

You can't rename the file using a standard form submission. The name of the file being uploaded is read-only. To do this, you'd have to do it server-side. (The designers of file uploads seem to have either not considered this rename-on-upload use case or not felt it needed to be addressed by the API.)

However, you can prevent the default form submission and instead submit it programmatically via ajax, which does allow you to rename the file; see man tou's answer.

Change the filename when uploading a file

Data you get from a File input are readonly. You cannot change file.name; You can use different hidden inputs/variables and supply that to the server so that it can rename it to that later.
Or you can create a new instance of File() and supply it with the new name, and upload that file instead.

Edit: JSFiddle Demo

Laravel : To rename an uploaded file automatically

For unique file Name saving

In 5.3 (best for me because use md5_file hashname in Illuminate\Http\UploadedFile):

public function saveFile(Request $request) {
    $file = $request->file('your_input_name')->store('your_path','your_disk');
}

In 5.4 (use not unique Str::random(40) hashname in Illuminate\Http\UploadedFile). I Use this code to ensure unique name:

public function saveFile(Request $request) {
    $md5Name = md5_file($request->file('your_input_name')->getRealPath());
    $guessExtension = $request->file('your_input_name')->guessExtension();
    $file = $request->file('your_input_name')->storeAs('your_path', $md5Name.'.'.$guessExtension  ,'your_disk');
}

Is there a way to rename the uploaded file without saving it?

Well, I finally found a way that's really simple - I guess I was overthinking this a bit. I figured I'll just share the solution, since some of you might need it. I tested it and it works for me.

You just have to create your own class HttpPostedFileBaseDerived that inherits from HttpPostedFileBase. The only difference between them is that you can make a constructor there.

    public class HttpPostedFileBaseDerived : HttpPostedFileBase
    {
        public HttpPostedFileBaseDerived(int contentLength, string contentType, string fileName, Stream inputStream)
        {
            ContentLength = contentLength;
            ContentType = contentType;
            FileName = fileName;
            InputStream = inputStream;
        }
        public override int ContentLength { get; }

        public override string ContentType { get; }

        public override string FileName { get; }

        public override Stream InputStream { get; }

        public override void SaveAs(string filename) { }

    }
}

Since constructor is not affected by ReadOnly, you can easily copy in the values from your original file object to your derived class's instance, while putting your new name in as well:

HttpPostedFileBase renameFile(HttpPostedFileBase file, string newFileName)
{
    string ext = Path.GetExtension(file.FileName); //don't forget the extension

    HttpPostedFileBaseDerived test = new HttpPostedFileBaseDerived(file.ContentLength, file.ContentType, (newFileName + ext), file.InputStream);
    return (HttpPostedFileBase)test; //cast it back to HttpPostedFileBase 
}

Once you are done you can type cast it back to HttpPostedFileBase so you wouldn't have to change any other code that you already have.

Hope this helps to anyone in the future. Also thanks to Manoj Choudhari for his answer, thanks to I learned of where not to look for the solution.

Rename file with user-defined name during upload on Express server

If you do not need to use formidable, you can use connect-busboy to obtain the field name from the 'POST' request. For a form field defined this way:

<input type="text" name="hiddenField" />
<input type="file" name="fileUpload" />

you can use connect-busboy to obtain the value from the hiddenField input:

var newName = null;

app.post('/upload', function(req, res) {

    req.pipe(req.busboy);
    // fieldName is 'hiddenField'
    req.busboy.on('field', function(fieldname, val) {
      newName = val;
    });

    req.busboy.on('file', function (fieldname, file, filename) {
        // fieldname is 'fileUpload'
        var fstream = fs.createWriteStream(__dirname + '/img/' + newName + '.jpg');
        file.pipe(fstream);
        fstream.on('close', function () {
            res.redirect('back');
        });      //where to go next
    });
});

The field event must be handled before the file event.

Kendo UI Upload rename file on server and update client

You have to manually update the file name e.g.

uploadSuccess: function (e) {
    $(".filename").text(e.response.fileName);
}

Where .filename is an element from the template:

File name: <span class="filename">#= name #</span> <br/>

Here is a live demo: http://dojo.telerik.com/@korchev/EGuXi

How do I change directory & rename the file during uploading in nodeJs?

I'd do it as follows, unless you need to keep the uploaded file in its original upload location:

var upload = multer({ dest: '/tmp' });

router.post('/file_upload', upload.single('file'), function (req, res) {
    // Here change 'uploads' to the folder name you prefer.
    // Also change req.file.originalname for your preferred file name
    var file = path.join(__dirname, 'uploads', req.file.originalname)
    fs.rename(req.file.path, file, function (err) {
        if (err) {
            console.log(err);
        } else {
            res.redirect("back")
        }

    })
})

---

Related Topics