Добавить ограничение на размер файла для моего файла загрузки XMLHttpRequest

Question

Я использую Trix (https://github.com/basecamp/trix) в качестве текстового редактора в своем приложении и разрешаю загрузку файлов через него. Я хочу добавить размер файла размером 5 МБ к моим загрузкам, но немного потерял, как это сделать. Как вы его реализуете?

(function() { 
    var createStorageKey, host, uploadAttachment; 

    document.addEventListener("trix-attachment-add", function(event) { 
    var attachment; 
    attachment = event.attachment; 
    if (attachment.file) { 
     return uploadAttachment(attachment); 
    } 
    }); 

    host = "https://my.cloudfront.net/"; 

    uploadAttachment = function(attachment) { 
    var file, form, key, xhr; 
    file = attachment.file; 
    key = createStorageKey(file); 
    form = new FormData; 
    form.append("key", key); 
    form.append("Content-Type", file.type); 
    form.append("file", file); 
    xhr = new XMLHttpRequest; 
    xhr.open("POST", host, true); 
    xhr.upload.onprogress = function(event) { 
     var progress; 
     progress = event.loaded/event.total * 100; 
     return attachment.setUploadProgress(progress); 
    }; 
    xhr.onload = function() { 
     var href, url; 
     if (xhr.status === 204) { 
     url = href = host + key; 
     return attachment.setAttributes({ 
      url: url, 
      href: href 
     }); 
     } 
    }; 
    return xhr.send(form); 
    }; 

    createStorageKey = function(file) { 
    var date, day, time; 
    date = new Date(); 
    day = date.toISOString().slice(0, 10); 
    time = date.getTime(); 
    return "tmp/" + day + "/" + time + "-" + file.name; 
    }; 

}).call(this); 

Answer 1

Вы должны сделать это на стороне клиента и на стороне сервера. Для стороны клиента, просто добавьте одно условие так:

file = attachment.file; 
if (file.size == 0) { 
    attachment.remove(); 
    alert("The file you submitted looks empty."); 
    return; 
} else if (file.size/(1024*2)) > 5) { 
    attachment.remove(); 
    alert("Your file seems too big for uploading."); 
    return; 
} 

Также вы можете посмотреть на этой Gist я написал, показывая полную реализацию: https://gist.github.com/pmhoudry/a0dc6905872a41a316135d42a5537ddb

Answer 2

Вы должны сделать это на стороне сервера и вернуть исключение, если размер файла превышает 5 МБ. Вы также можете проверить его на стороне клиента через event.file, он имеет атрибут «размер», вы можете получить размер размера оттуда.

if((event.file.size/(1024*2)) > 5) { 
    console.log('do your logic here'); 
}