JavaScript/jQuery FileUploader - Specify a file's GUID

Use the valueChanged event to generate a unique identifier (GUID) for a file before it is uploaded and pass it as a parameter to the upload URL.

See Also: DataGrid - How to use FileUploader as a cell editor.

index.js
  • $(function () {
  • $("#{file-uploader}Container").dxFileUploader({
  • multiple: false,
  • accept: "*",
  • value: [],
  • uploadMode: "instantly",
  • uploadUrl: "https://js.devexpress.com/Content/Services/upload.aspx",
  • onValueChanged: function (e) {
  • var url = e.component.option("uploadUrl");
  • url = updateQueryStringParameter(url, "fileGuid", uuidv4());
  • e.component.option("uploadUrl", url);
  • }
  • })
  • .dxFileUploader("instance");
  • });
  • function updateQueryStringParameter(uri, key, value) {
  • var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
  • var separator = uri.indexOf("?") !== -1 ? "&" : "?";
  • if (uri.match(re)) {
  • return uri.replace(re, "$1" + key + "=" + value + "$2");
  • } else {
  • return uri + separator + key + "=" + value;
  • }
  • }
  • function uuidv4() {
  • return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
  • var r = (Math.random() * 16) | 0,
  • v = c == "x" ? r : (r & 0x3) | 0x8;
  • return v.toString(16);
  • });
  • }