Help! No mater what I do I cant seem to give an image a custom file name using multer-s3. I have this really cool custom function that uploads images to s3. It works fine if I use the files original file name however when I try to use a custom file name it will upload the first image three times under the new file names. If anyone has any suggestions, insights or knows why this doesnt work. I'd apprecaite it.
var AWS = require("../AWS").AWS;
var s3 = require("../AWS").s3;
var multer = require("multer");
var multerS3 = require("multer-s3");
function generateKey(file, newFileName) {
// var finalFileName = newFileName + "." + file.originalname.split(".")[1];
var finalFileName = newFileName + "." + file.originalname.split(".")[1];
return finalFileName;
}
async function singleFileUpload(req, res, newFileName, bucketName, fieldName) {
var fileFilter = (req, file, cb) => {
var ext = file.originalname.split(".").slice(-1);
if (ext == "jpg" || ext == "mp4" || ext == "wmv") {
cb(null, true);
} else {
cb(new Error("invalid file format"), false);
}
};
var upload = multer({
fileFilter,
storage: multerS3({
s3,
bucket: bucketName,
acl: "public-read",
metadata: function(req, file, cb) {
cb(null, { test: "testing_meta_data!" });
},
// key: function(req, file, cb) {
// // let fileExtension = file.originalname.split(".")[1];
// let finalFileName = file.originalname;
// console.log(finalFileName);
// cb(null, finalFileName);
// }
key: function(req, file, cb) {
var newKey = generateKey(file, newFileName);
console.log("newKey", newKey);
cb(null, newKey);
}
})
});
console.log(fieldName);
var singleUpload = upload.any(fieldName);
await singleUpload(req, res, error => {
if (error) {
throw error;
} else {
console.log("it worked");
}
});
}
Than i call my custom function like so
singleFileUpload(req, res, "myNewFileName" "mybucketName", fieldName);
I call this several times because I want the ability to rename each file.
Thanks.
this code works.
var upload = multer({
storage: multerS3({
s3,
bucket: process.env.BUCKET_NAME,
metadata: function(req, file, cb) {
cb(null, { fieldName: file.fieldname });
},
key: function(req, file, cb) {
cb(null, reNameFiles(file, req.body.id, req.originalUrl));
},
contentType: multerS3.AUTO_CONTENT_TYPE
})
});
function reNameFiles(file, id, type) {
let lastIndex = type.lastIndexOf("/");
let videoType = type.slice(lastIndex + 1);
let finalFileName = "";
if (videoType == "templateMainVideoThumbnail") {
finalFileName =
"templates/" +
id +
"/main/original/" +
"video" +
"." +
file.originalname.split(".").slice(-1);
return finalFileName;
}
for (let i = 1; i <= 4; i++) {
if (videoType === "templateExampleVideo" + i) {
finalFileName =
"templates/" +
id +
"/example" +
i.toString() +
"/original/example" +
i.toString() +
"." +
file.originalname.split(".").slice(-1);
return finalFileName;
}
}
for (let j = 1; j <= 4; j++) {
if (videoType === "templateExamplePoster" + j) {
finalFileName =
"templates/" +
id +
"/example" +
j.toString() +
"/poster." +
file.originalname.split(".").slice(-1);
return finalFileName;
}
}
if (videoType === "templatePosterImage") {
finalFileName =
"templates/" +
id +
"/poster/poster" +
"." +
file.originalname.split(".").slice(-1);
return finalFileName;
}
if (videoType == "templateThumbnailFiles") {
let cleanOrginalName = file.originalname.replace(/\s/g, "");
finalFileName =
"templates/" + id + "/thumbnails/" + Date.now() + cleanOrginalName;
return finalFileName;
}
if (videoType == "stockMainVideoThumbnail") {
finalFileName =
"stock/" +
id +
"/main/original/" +
"video" +
"." +
file.originalname.split(".").slice(-1);
return finalFileName;
}
if (videoType == "stockPosterImage") {
finalFileName =
"stock/" +
id +
"/poster/poster" +
"." +
file.originalname.split(".").slice(-1);
return finalFileName;
}
if (videoType == "stockDownloadableFiles") {
finalFileName = "stock/" + id + "/downloadable/" + file.originalname;
return finalFileName;
}
}
I am using this approach for renaming and uploading my file through s3-multer you can use the same:
key: function (req, file, cb) {
file.originalname = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)+path.extname(file.originalname);
var fullPath = 'public/signature/'+ file.originalname;
cb(null, fullPath)
}
Related
When I am trying to upload large file using 3 new methods (StartUpload, ContinueUpload, FinishUpload) by uploading chunks of file then final uploaded file is corrupt file and size is also greater than actual file. I have used Rest API to upload large files.
Steps followed are as follows:-
Create HTML for input file.
<input name="FileUpload" type="file" id="uploadInput" className="inputFile" multiple="false" onchange="upload(this.files[0])" />
Below method is start point of code:
Creating Global variable for siteurl
var Tasks = {
urlName: window.location.origin + "/",
siteName: '/sites/ABC',
};
Calling Upload() method
First Create Dummy File with size 0 in folder to continue with large file upload.
Create FileReader object and then start creating chunks of file with 3 parameters(offset,length,method(i.e. start/continue/finishupload)) and push chunks into an array.
Creating unique id for upload i.e. uploadID
Calling UploadFile method
function upload(file) {
var docLibraryName = "/sites/ABC/Shared Documents";
var fileName = $("#uploadInput").val().replace(/C:\\fakepath\\/i, '');
var folderName = "";
createDummaryFile(docLibraryName, fileName, folderName)
var fr = new FileReader();
var offset = 0;
var total = file.size;
var length = 1000000 > total ? total : 1000000;
var chunks = [];
fr.onload = evt => {
while (offset < total) {
if (offset + length > total)
length = total - offset;
chunks.push({
offset,
length,
method: getUploadMethod(offset, length, total)
});
offset += length;
}
for (var i = 0; i < chunks.length; i++)
console.log(chunks[i]);
if (chunks.length > 0) {
const id = getGuid();
uploadFile(evt.target.result, id, docLibraryName, fileName, chunks, 0);
}
};
fr.readAsArrayBuffer(file);
}
function createDummaryFile(libraryName, fileName, folderName) {
return new Promise((resolve, reject) => {
var endpoint = Tasks.urlName + Tasks.siteName + "/_api/web/GetFolderByServerRelativeUrl('" + libraryName + "/" + folderName + "')/Files/add(url=#TargetFileName,overwrite='true')?" +
"&#TargetFileName='" + fileName + "'";
var url;
const headers = {
"accept": "application/json;odata=verbose"
};
performUpload(endpoint, headers, libraryName, fileName, folderName, convertDataBinaryString(0));
});
}
function S4() {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
}
function getGuid() {
return (S4() + S4() + "-" + S4() + "-4" + S4().substr(0, 3) + "-" + S4() + "-" + S4() + S4() + S4()).toLowerCase();
}
//check position for selecting method
function getUploadMethod(offset, length, total) {
if (offset + length + 1 > total) {
return 'finishupload';
} else if (offset === 0) {
return 'startupload';
} else if (offset < total) {
return 'continueupload';
}
return null;
}
Upload file method
Convert arraybuffer to blob chunks to start uploading file
Start actual file chunks upload using methods and offset of 1mb we created earlier (uploadFileChunk method)
Start loop for chunk and call same method
function uploadFile(result, id, libraryPath, fileName, chunks, index) {
const data = convertFileToBlobChunks(result, chunks[index]);
var response = uploadFileChunk(id, libraryPath, fileName, chunks[index], data);
index += 1;
if (index < chunks.length)
uploadFile(result, id, libraryPath, fileName, chunks, index, chunks[index].offset);
}
function convertFileToBlobChunks(result, chunkInfo) {
var arrayBuffer = chunkInfo.method === 'finishupload' ? result.slice(chunkInfo.offset) : result.slice(chunkInfo.offset, chunkInfo.offset + chunkInfo.length);
return convertDataBinaryString(arrayBuffer);
}
function convertDataBinaryString(data) {
var fileData = '';
var byteArray = new Uint8Array(data);
for (var i = 0; i < byteArray.byteLength; i++) {
fileData += String.fromCharCode(byteArray[i]);
}
return fileData;
}
UploadFileChunk method to actually start uploading file chunks)
Form string if startupload then no fileoffset and if continueupload and finishupload then it will have fileoffset.
Call performupload method to start uploading using rest api
function uploadFileChunk(id, libraryPath, fileName, chunk, data) {
new Promise((resolve, reject) => {
var offset = chunk.offset === 0 ? '' : ',fileOffset=' + chunk.offset;
var folderName = "";
var endpoint = Tasks.urlName + Tasks.siteName + "/_api/web/getfilebyserverrelativeurl('" + libraryPath + "/" + fileName + "')/" + chunk.method + "(uploadId=guid'" + id + "'" + offset + ")";
const headers = {
"Accept": "application/json; odata=verbose",
"Content-Type": "application/octet-stream"
};
performUpload(endpoint, headers, libraryPath, fileName, folderName, data);
});
}
function performUpload(endpoint, headers, libraryName, fileName, folderName, fileData) {
new Promise((resolve, reject) => {
var digest = $("#__REQUESTDIGEST").val();
$.ajax({
url: endpoint,
async: false,
method: "POST",
headers: headers,
data: fileData,
binaryStringRequestBody: true,
success: function(data) {},
error: err => reject(err.responseText)
});
});
}
Please suggest why file uploaded is corrupted and having size less or greater than actual file?
Thanks in advance.
I had the same problem with this code. I changed convertFileToBlobChunks to just return the ArrayBuffer.
function convertFileToBlobChunks(result, chunkInfo) {
var arrayBuffer = chunkInfo.method === 'finishupload' ?
result.slice(chunkInfo.offset) : result.slice(chunkInfo.offset, chunkInfo.offset + chunkInfo.length);
return arrayBuffer;
}
I also removed "Content-Type": "application/octet-stream" from the header.
After doing that it uploaded fine.
I'd like to send base64 image as an attachment to a trello card through the API
POST /1/cards/[card id or shortlink]/attachments
There's a file field but it does not specify how should look the data there.
Refs: https://developers.trello.com/advanced-reference/card#post-1-cards-card-id-or-shortlink-attachments
Any idea?
Short answer: Trello's API only works to attach binary data via multipart/form-data. Examples below.
Long answer:
The Trello API to add attachments and images is frustratingly under-documented. They do have a coffeescript Client.js for those of us using Javascript to simplify all the basic operations: https://trello.com/1/client.coffee
Using the vanilla Client.js file I have been able to attach links and text files. While the CURL example shows pulling a binary file in from a hard drive, that doesn't work for those of us completely on a server or client where we don't have permissions to create a file.
From a LOT of trial and error, I've determined all binary data (images, documents, etc.) must be attached using multipart/form-data. Here is a jQuery snippet that will take a URL to an item, get it into memory, and then send it to Trello.
var opts = {'key': 'YOUR TRELLO KEY', 'token': 'YOUR TRELLO TOKEN'};
var xhr = new XMLHttpRequest();
xhr.open('get', params); // params is a URL to a file to grab
xhr.responseType = 'blob'; // Use blob to get the file's mimetype
xhr.onload = function() {
var fileReader = new FileReader();
fileReader.onload = function() {
var filename = (params.split('/').pop().split('#')[0].split('?')[0]) || params || '?'; // Removes # or ? after filename
var file = new File([this.result], filename);
var form = new FormData(); // this is the formdata Trello needs
form.append("file", file);
$.each(['key', 'token'], function(iter, item) {
form.append(item, opts.data[item] || 'ERROR! Missing "' + item + '"');
});
$.extend(opts, {
method: "POST",
data: form,
cache: false,
contentType: false,
processData: false
});
return $.ajax(opts);
};
fileReader.readAsArrayBuffer(xhr.response); // Use filereader on blob to get content
};
xhr.send();
I have submitted a new coffeescript for Trello developer support to consider uploading to replace Client.js. It adds a "Trello.upload(url)" that does this work.
I've also attached here for convenience in JS form.
// Generated by CoffeeScript 1.12.4
(function() {
var opts={"version":1,"apiEndpoint":"https://api.trello.com","authEndpoint":"https://trello.com"};
var deferred, isFunction, isReady, ready, waitUntil, wrapper,
slice = [].slice;
wrapper = function(window, jQuery, opts) {
var $, Trello, apiEndpoint, authEndpoint, authorizeURL, baseURL, collection, fn, fn1, i, intentEndpoint, j, key, len, len1, localStorage, location, parseRestArgs, readStorage, ref, ref1, storagePrefix, token, type, version, writeStorage;
$ = jQuery;
key = opts.key, token = opts.token, apiEndpoint = opts.apiEndpoint, authEndpoint = opts.authEndpoint, intentEndpoint = opts.intentEndpoint, version = opts.version;
baseURL = apiEndpoint + "/" + version + "/";
location = window.location;
Trello = {
version: function() {
return version;
},
key: function() {
return key;
},
setKey: function(newKey) {
key = newKey;
},
token: function() {
return token;
},
setToken: function(newToken) {
token = newToken;
},
rest: function() {
var args, error, method, params, path, ref, success;
method = arguments[0], args = 2 <= arguments.length ? slice.call(arguments, 1) : [];
ref = parseRestArgs(args), path = ref[0], params = ref[1], success = ref[2], error = ref[3];
opts = {
url: "" + baseURL + path,
type: method,
data: {},
dataType: "json",
success: success,
error: error
};
if (!$.support.cors) {
opts.dataType = "jsonp";
if (method !== "GET") {
opts.type = "GET";
$.extend(opts.data, {
_method: method
});
}
}
if (key) {
opts.data.key = key;
}
if (token) {
opts.data.token = token;
}
if (params != null) {
$.extend(opts.data, params);
}
if (method === 'UPLOAD' && typeof (params) === "string" && params.length > 5) {
var xhr = new XMLHttpRequest();
xhr.open('get', params);
xhr.responseType = 'blob'; // Use blob to get the mimetype
xhr.onload = function() {
var fileReader = new FileReader();
fileReader.onload = function() {
var filename = (params.split('/').pop().split('#')[0].split('?')[0]) || params || '?'; // Removes # or ? after filename
var file = new File([this.result], filename);
var form = new FormData();
form.append("file", file);
$.each(['key', 'token'], function(iter, item) {
form.append(item, opts.data[item] || 'ERROR! Missing "' + item + '"');
});
$.extend(opts, {
method: "POST",
data: form,
cache: false,
contentType: false,
processData: false
});
return $.ajax(opts);
};
fileReader.readAsArrayBuffer(xhr.response); // Use filereader on blob to get content
};
xhr.send();
} else {
return $.ajax(opts);
}
},
authorized: function() {
return token != null;
},
deauthorize: function() {
token = null;
writeStorage("token", token);
},
authorize: function(userOpts) {
var k, persistToken, ref, regexToken, scope, v;
opts = $.extend(true, {
type: "redirect",
persist: true,
interactive: true,
scope: {
read: true,
write: false,
account: false
},
expiration: "30days"
}, userOpts);
regexToken = /[&#]?token=([0-9a-f]{64})/;
persistToken = function() {
if (opts.persist && (token != null)) {
return writeStorage("token", token);
}
};
if (opts.persist) {
if (token == null) {
token = readStorage("token");
}
}
if (token == null) {
token = (ref = regexToken.exec(location.hash)) != null ? ref[1] : void 0;
}
if (this.authorized()) {
persistToken();
location.hash = location.hash.replace(regexToken, "");
return typeof opts.success === "function" ? opts.success() : void 0;
}
if (!opts.interactive) {
return typeof opts.error === "function" ? opts.error() : void 0;
}
scope = ((function() {
var ref1, results;
ref1 = opts.scope;
results = [];
for (k in ref1) {
v = ref1[k];
if (v) {
results.push(k);
}
}
return results;
})()).join(",");
switch (opts.type) {
case "popup":
(function() {
var authWindow, height, left, origin, receiveMessage, ref1, top, width;
waitUntil("authorized", (function(_this) {
return function(isAuthorized) {
if (isAuthorized) {
persistToken();
return typeof opts.success === "function" ? opts.success() : void 0;
} else {
return typeof opts.error === "function" ? opts.error() : void 0;
}
};
})(this));
width = 420;
height = 470;
left = window.screenX + (window.innerWidth - width) / 2;
top = window.screenY + (window.innerHeight - height) / 2;
origin = (ref1 = /^[a-z]+:\/\/[^\/]*/.exec(location)) != null ? ref1[0] : void 0;
authWindow = window.open(authorizeURL({
return_url: origin,
callback_method: "postMessage",
scope: scope,
expiration: opts.expiration,
name: opts.name
}), "trello", "width=" + width + ",height=" + height + ",left=" + left + ",top=" + top);
receiveMessage = function(event) {
var ref2;
if (event.origin !== authEndpoint || event.source !== authWindow) {
return;
}
if ((ref2 = event.source) != null) {
ref2.close();
}
if ((event.data != null) && /[0-9a-f]{64}/.test(event.data)) {
token = event.data;
} else {
token = null;
}
if (typeof window.removeEventListener === "function") {
window.removeEventListener("message", receiveMessage, false);
}
isReady("authorized", Trello.authorized());
};
return typeof window.addEventListener === "function" ? window.addEventListener("message", receiveMessage, false) : void 0;
})();
break;
default:
window.location = authorizeURL({
redirect_uri: location.href,
callback_method: "fragment",
scope: scope,
expiration: opts.expiration,
name: opts.name
});
}
},
addCard: function(options, next) {
var baseArgs, getCard;
baseArgs = {
mode: 'popup',
source: key || window.location.host
};
getCard = function(callback) {
var height, left, returnUrl, top, width;
returnUrl = function(e) {
var data;
window.removeEventListener('message', returnUrl);
try {
data = JSON.parse(e.data);
if (data.success) {
return callback(null, data.card);
} else {
return callback(new Error(data.error));
}
} catch (error1) {}
};
if (typeof window.addEventListener === "function") {
window.addEventListener('message', returnUrl, false);
}
width = 500;
height = 600;
left = window.screenX + (window.outerWidth - width) / 2;
top = window.screenY + (window.outerHeight - height) / 2;
return window.open(intentEndpoint + "/add-card?" + $.param($.extend(baseArgs, options)), "trello", "width=" + width + ",height=" + height + ",left=" + left + ",top=" + top);
};
if (next != null) {
return getCard(next);
} else if (window.Promise) {
return new Promise(function(resolve, reject) {
return getCard(function(err, card) {
if (err) {
return reject(err);
} else {
return resolve(card);
}
});
});
} else {
return getCard(function() {});
}
}
};
ref = ["GET", "PUT", "POST", "DELETE", "UPLOAD"];
fn = function(type) {
return Trello[type.toLowerCase()] = function() {
return this.rest.apply(this, [type].concat(slice.call(arguments)));
};
};
for (i = 0, len = ref.length; i < len; i++) {
type = ref[i];
fn(type);
}
Trello.del = Trello["delete"];
ref1 = ["actions", "cards", "checklists", "boards", "lists", "members", "organizations", "lists"];
fn1 = function(collection) {
return Trello[collection] = {
get: function(id, params, success, error) {
return Trello.get(collection + "/" + id, params, success, error);
}
};
};
for (j = 0, len1 = ref1.length; j < len1; j++) {
collection = ref1[j];
fn1(collection);
}
window.Trello = Trello;
authorizeURL = function(args) {
var baseArgs;
baseArgs = {
response_type: "token",
key: key
};
return authEndpoint + "/" + version + "/authorize?" + $.param($.extend(baseArgs, args));
};
parseRestArgs = function(arg) {
var error, params, path, success;
path = arg[0], params = arg[1], success = arg[2], error = arg[3];
if (isFunction(params)) {
error = success;
success = params;
params = {};
}
path = path.replace(/^\/*/, "");
return [path, params, success, error];
};
localStorage = window.localStorage;
if (localStorage != null) {
storagePrefix = "trello_";
readStorage = function(key) {
return localStorage[storagePrefix + key];
};
writeStorage = function(key, value) {
if (value === null) {
return delete localStorage[storagePrefix + key];
} else {
return localStorage[storagePrefix + key] = value;
}
};
} else {
readStorage = writeStorage = function() {};
}
};
deferred = {};
ready = {};
waitUntil = function(name, fx) {
if (ready[name] != null) {
return fx(ready[name]);
} else {
return (deferred[name] != null ? deferred[name] : deferred[name] = []).push(fx);
}
};
isReady = function(name, value) {
var fx, fxs, i, len;
ready[name] = value;
if (deferred[name]) {
fxs = deferred[name];
delete deferred[name];
for (i = 0, len = fxs.length; i < len; i++) {
fx = fxs[i];
fx(value);
}
}
};
isFunction = function(val) {
return typeof val === "function";
};
wrapper(window, jQuery, opts);
}).call(this);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
I have an express app that I am using Sharp to resize images after a user has uploaded them. When I start the app using 'npm start' I am able to upload the images with no issues, but if I use PM2 to manage the process the images don't get saved on the server. I can save them without using Sharp to resize them, it is only when I have the code for sharp that they don't get saved. Below is the code from my controller. Multer is processing the form and sharp is resizing the image.
doNewRecipe: function(req, res) {
for (var key in req.body) {
req.body[key] = req.body[key] || undefined;
}
var body = _.pick(req.body, 'title', 'description', 'ingredients', 'instructions', 'yield', 'prep_time', 'cook_time', 'categoryId');
body.userId = req.session.user.id;
if (req.file) {
var tempPath = req.file.path,
ext = path.extname(req.file.originalname).toLowerCase(),
//targetPath = path.resolve(finalUploadPath + req.file.filename + ext);
targetPath = path.resolve(finalUploadPath);
fs.renameSync(tempPath, tempPath + ext);
var newFileName = req.file.filename + ext;
var imageFile = tempPath + ext;
body.image = newFileName;
sharp(imageFile)
.resize(450, 450)
.max()
.toFile('./public/finalUpload/' + newFileName, function(err, info) {
body.image = newFileName;
fs.unlinkSync(path.resolve(tempPath + ext));
db.recipe.create(body).then(function(recipe) {
res.redirect('/recipe/view/' + recipe.id);
}, function(e) {
console.log(e.message);
res.render('error', {message: e.toString()});
});
});
//fs.renameSync(tempPath, targetPath);
} else {
db.recipe.create(body).then(function(recipe) {
res.redirect('/recipe/view/' + recipe.id);
}, function(e) {
console.log(e.message);
res.render('error', {message: e.toString()});
});
}
},
If you use path to determine where to save the file it will transport easily from one system to another. I actually created a few variables to determine where to save the file. Below is my code.
if (process.env.NODE_ENV === 'production') {
var finalUploadPath = 'hidden';
var googleTracking = true;
} else if (process.env.NODE_ENV === 'staging') {
var finalUploadPath = 'hidden';
var googleTracking = false;
} else {
var finalUploadPath = 'hidden';
var googleTracking = false;
}
sharp(imageFile)
.resize(450, 450)
.max()
.toFile(finalUploadPath + req.file.filename + '.jpg', function(err, info) {
body.image = req.file.filename + '.jpg';
fs.unlinkSync(path.resolve(tempPath + ext));
compressAndResize(path.resolve(__dirname, '../public/finalUpload/' + body.image));
db.recipe.create(body).then(function(recipe) {
req.flash('success', 'Recipe created');
res.redirect('/recipe/view/' + recipe.id + '/' + recipe.slug);
}, function(e) {
console.log(e.message);
req.flash('error', 'Error creating new recipe');
res.render('error', {message: e.toString(), csrfToken: req.csrfToken(), google: googleTracking});
});
});
Can anybody give me example of code for uploading and downloading different type of files by Using Custom Control in ASP .NET MVC4 by using PlUpload Plugin. I want to save files for my task, message with unique Ids in database and want to retrieve them too. Here is my code that I tried for uploading
server side
public ActionResult UploadFiles(string id)
{
for (int i = 0; i < Request.Files.Count; i++)
{
var file = Request.Files[i];
file.SaveAs(AppDomain.CurrentDomain.BaseDirectory + "Uploads/" + file.FileName);
}
return Json(new { success = true }, JsonRequestBehavior.AllowGet);
}
and for plupload plugin code for client side for uploading file is
$("#file_attachments").pluploadQueue(
{
// General settings
runtimes: 'html5,flash,silverlight',
url: '/SideMenuBar/UploadFiles',
max_file_size: '100mb',
chunk_size: '1mb',
unique_names: true,
multipart: true,
// Specify what files to browse for
filters: [
{ title: "Image files", extensions: "jpg,gif,png" },
{ title: "Zip files", extensions: "zip" },
{ title: "Rar files", extensions: "rar" },
{ title: "Document files", extensions: "docx,doc,xlx,xlxs,ppt" },
],
// Flash settings
flash_swf_url: 'Script/lib/plupload/js/plupload.flash.swf',
// Silverlight settings
silverlight_xap_url: 'Script/lib/plupload/js/plupload.silverlight.xap',
// PreInit events, bound before any internal events
preinit: {
Init: function (up, info) {
//alert('[Init]'+ info+ 'Features:'+ up.features);
},
UploadFile: function (up, file) {
// alert('[UploadFile]', file);
// You can override settings before the file is uploaded
up.settings.url = '/SideMenuBar/UploadFiles?id=' + file.id;
//up.settings.multipart_params = {param1: 'value1', param2: 'value2'};
}
},
// Post init events, bound after the internal events
init:
UploadComplete: function (up, files) {
// destroy the uploader and init a new one
up.destroy();
}
}
});
var uploader = $('#file_attachments').pluploadQueue();
uploader.bind('FileUploaded', function (upldr, file, object) {
if (uploader.files.length == (uploader.total.uploaded + uploader.total.failed)) {
$(".file_upload_cancel").hide();
$(".file_upload_done").show();
}
});
uploader.bind("FilesAdded", function (up, filesToBeAdded) {
if (up.files.length > 5) {
up.files.splice(4, up.files.length - 5);
showStatus("Only 5 files max are allowed per upload. Extra files removed.", 3000, true);
return false;
}
return true;
});
$('.upload_files').click(function (e) {
e.preventDefault();
$(".file_up").show();
});
$('#new_message_form').submit(function (e) {
var uploader = $('#file_attachments').pluploadQueue();
// Files in queue upload them first
if (uploader.files.length > 0) {
// When all files are uploaded submit form
uploader.bind('StateChanged', function () {
if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
//uncoment next line to submit form after all files are uploaded
//$('#new_message_form')[0].submit();
}
});
uploader.start();
}
return false;
});
}
How can I resolve problem
You are using an option called "chunk", which divides your file in the size of the chunk - it's a good practice, to prevent errors.
You have determined it with the property "chunk_size". For example: you have a file of 5mb. When you upload, you'll have 5 parts of 1mb - until the upload is complete. Then, you'll have to put them together.
I recommend you to see this link to more informations about chunk and how to make it work.
Here is an example of one of my implementation - with MVC 3 - of plupload with chunk.
I'll post the javascript code and the action. I think it will be good for you to know how to implement in your case.
function installFolderFileUploader(action, id, ProfileType, intMaxFilesPermitted, Folder, maxSizeMB) {
var uploaderRuntimes = 'html5, flash, silverlight';
var uploader = new plupload.Uploader({
runtimes: uploaderRuntimes,
browse_button: 'imgBtnPhotoUpload',
url: action,
flash_swf_url: '/Scripts/Plugins/Moxie.swf',
silverlight_xap_url: '/Scripts/Plugins/Moxie.xap',
multipart_params: { 'id': id, 'ProfileType': ProfileType },
multi_selection: true,
max_file_count: '5',
chunk_size: '100KB',
filters: {
max_file_size: maxSizeMB + 'MB'
},
init: {
FileUploaded: function (Up, File, Response) {
var jsonObj = jQuery.parseJSON(Response.response);
if (jsonObj.success) {
mountFileUploadFields(jsonObj, Folder, ProfileType);
}
},
PostInit: function () {
//meow
$('#imgBtnPhotoUpload').next().css({ 'top': '0', 'width': '146px', 'height': '28px', 'cursor': 'pointer' });
},
FilesAdded: function (up, files) {
var totalInPage = parseInt($('#dvFileContainer .BeeFileDetails').length);
if ((up.files.length + totalInPage) > parseInt(intMaxFilesPermitted)) {
jQuery.facebox({ div: "#dvMaxFilesPermitedError" });
up.splice();
up.refresh();
return false;
}
else {
if (totalInPage >= parseInt(intMaxFilesPermitted)) {
jQuery.facebox({ div: "#dvMaxFilesPermitedError" });
up.splice();
up.refresh();
return false;
}
else {
$('#dvFileList').css('margin-left', '2px');
$('#dvFileList').css('font-size', '10px');
$('#dvFileList').css('display', 'block');
plupload.each(files, function (file) {
$('#dvFileList').append('<div>');
$('#dvFileList').append('<div style="width:84%;margin-left:30px;float:left;" id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ')<b></b></div>');
$('#dvFileList').append('<img class="removeFile" style="margin-top:2px;cursor:pointer;" src="/Content/images/cancel.png" id="' + file.id + '" />');
$('#dvFileList').append('</div>');
$('.removeFile').on('click', function () {
$('#' + file.id).remove();
$('img[id=' + file.id + ']').remove();
uploader.stop();
uploader.splice();
});
});
uploader.start();
}
}
},
UploadProgress: function (up, file) {
if (file.percent == 100) {
$('#' + file.id).remove();
$('img[id=' + file.id + ']').remove();
}
$('#' + file.id + ' b:eq(0)').html('<span> - ' + file.percent + '%</span>');
$('#' + file.id + ' b:eq(0)').append('<div id="fileUploaded" style="background-color:#0099FF;height:3px;width:' + file.percent + '%";></div>');
},
ChunkUploaded: function (up, file, info) {
var jsonObj = jQuery.parseJSON(info.response);
if (jsonObj.tempFile != "") {
uploader.settings.multipart_params.tempFile = jsonObj.tempFile;
}
else {
$('#' + file.id).remove();
$('img[id=' + file.id + ']').remove();
var totalInPage = parseInt($('#dvFileContainer .BeeFileDetails').length);
if (totalInPage > 0)
$('.BeeEditFileActions').fadeIn();
var fileName = uploader.settings.multipart_params.tempFile;
removeNonUsedFiles(id, fileName, 'File');
uploader.settings.multipart_params.tempFile = '';
uploader.stop();
uploader.splice();
uploader.refresh();
jQuery.facebox({ div: "#dvAddFolderFileError" });
}
},
Error: function (up, err) {
if (err.code != '-500')
jQuery.facebox({ div: "#dvAddFolderFileError" });
},
UploadComplete: function (a, Response) {
$('.BeeEditFileActions').fadeIn();
$('#dvFileList').empty();
uploader.splice();
uploader.refresh();
}
}
});
uploader.init();
}
And the Action:
[AllowAnonymous]
[HttpPost]
public JsonResult UploadFolderFile(string id, Domain.Profile.TypeProfile ProfileType, string tempFile, string name, int? chunk, int? chunks)
{
String strTempFile = string.Empty;
String strSaveLocation = string.Empty;
try
{
var fileData = Request.Files[0];
chunk = chunk ?? 0;
String strExtension = Path.GetExtension(name).ToLower();
Models.Identity.CustomIdentity objUser = new Models.Identity.CustomIdentity(System.Web.Security.FormsAuthentication.Decrypt(id));
DB.CompanyNetworkDB objCompanyDB = new DB.CompanyNetworkDB();
Int32 intMaxFileSize = objCompanyDB.getFileInFolderMaxSize(objUser.CompanyNetworkID) * 1024 * 1024;
if (objUser != null && objUser.IsAuthenticated && fileData.ContentLength <= intMaxFileSize)
{
////Get upload file.
String strSaveLocationURL = Domain.Profile.getUploadItemsFolder(objUser.CompanyNetworkID, ProfileType, Domain.Profile.UploadType.Folder);
strSaveLocationURL += "temp/";
strSaveLocation = Server.MapPath(strSaveLocationURL);
strTempFile = string.IsNullOrEmpty(tempFile) ? DateTime.Now.Ticks.ToString() + strExtension : tempFile;
long fileSize = 0;
using (var fs = new FileStream(Path.Combine(strSaveLocation, strTempFile), chunk == 0 ? FileMode.Create : FileMode.Append))
{
var buffer = new byte[fileData.InputStream.Length];
fileData.InputStream.Read(buffer, 0, buffer.Length);
fs.Write(buffer, 0, buffer.Length);
fileSize = fs.Length;
}
if (fileSize <= intMaxFileSize)
{
if (chunk == chunks - 1)
{
return Json(new { success = true, OriginalFileName = Path.GetFileName(name), ServerFileName = strTempFile, SizeMB = fileSize });
}
else
{
return Json(new { success = true, tempFile = strTempFile });
}
}
else
{
return Json(new { success = false });
}
}
else
{
return Json(new { success = false });
}
}
catch (ArgumentOutOfRangeException)
{
System.IO.File.Delete(Path.Combine(strSaveLocation, strTempFile));
return Json(new { success = false, erro = "canceled" });
}
catch (Exception ex)
{
throw new Exception(ex.Message);
}
}
I think it could help.
Can someone helps me with some example using haraka librairy?
We use Haraka as our application mail server. We have written a simple plugin which takes any incoming mail and post it to our application web server.
Here is the plugin script. Just save it to a file do the necessary name changes and add the path to Harakas config/plugins file.
var
fs = require('fs'),
query_string = require('querystring'),
logger = require('./logger'),
DROP_DIRECTORY_PATH = '/path/haraka/drop/',
RETRY_DIRECTORY_PATH = '/path/haraka/retry/',
HOST_NAME = 'this_haraka_servers_name';
exports.hook_queue = function (next, connection, params) {
'use strict';
function haraka_log(function_name_in, section_in, text_in) {
var log_text = '[HttpMail]';
log_text += ' [' + function_name_in + ']';
log_text += ' [' + section_in + ']';
log_text += ' ' + text_in;
logger.lognotice(log_text);
}//function haraka_log
function move_file(filename_in) {
fs.rename(DROP_DIRECTORY_PATH + filename_in, RETRY_DIRECTORY_PATH + filename_in, function (err) {
if (err) {
//throw err;
haraka_log('move_file', 'fs.rename ... failed', filename_in + '\n' + JSON.stringify(err));
} else {
haraka_log('move_file', 'fs.rename ... success', filename_in);
}
});
}//function move_file
function delete_file(filename_in) {
fs.unlink(DROP_DIRECTORY_PATH + filename_in, function (err) {
if (err) {
//throw err;
haraka_log('delete_file', 'fs.unlink ... failed', filename_in + '\n' + JSON.stringify(err));
} else {
haraka_log('delete_file', 'fs.unlink ... success', filename_in);
}
});
}//function delete_file
function http_post_file(filename_in) {
var
http = require('http'),
post_options = {
host: 'my.server.com',
port: 80,
path: '/http_mail/' + HOST_NAME + '?' + query_string.stringify({FileName: filename_in}),
method: 'POST',
headers: {'Content-Type': 'text/plain'}
},
post_request,
read_stream;
haraka_log('http_post_file', 'Before http.request', filename_in);
post_request = http.request(post_options, function (post_response) {
haraka_log('http_post_file', 'post_response', ' post_response.statusCode = ' + post_response.statusCode + ' : ' + filename_in);
if (post_response.statusCode === 200) {
delete_file(filename_in);
} else {
move_file(filename_in);//Posted later by retry script;
}
post_response.resume();
});//post_request = http.request(post_options, function(post_response) {
post_request.on('error', function (err) {
haraka_log('http_post_file post_request.on(\'error\' ...)', err.message, filename_in);
move_file(filename_in);
});//post_request.on('error', function(err) {
read_stream = fs.createReadStream(DROP_DIRECTORY_PATH + filename_in);
read_stream.pipe(post_request);
}//function http_post_file
var
x_sender = connection.transaction.mail_from,
x_receiver_list = connection.transaction.rcpt_to,
filename = x_sender + '_' + new Date().toISOString() + '_' + connection.uuid,
writeStream;
filename = filename.replace(/\//g, '');
connection.transaction.add_header('x-sender', x_sender.toString());
x_receiver_list.forEach(function (value) {
connection.transaction.add_header('x-receiver', value.toString());
});
haraka_log('main', 'filename', filename);
writeStream = fs.createWriteStream(DROP_DIRECTORY_PATH + filename);
//connection.transaction.message_stream.pipe(writeStream, {dot_stuffing: true, ending_dot: true});
connection.transaction.message_stream.pipe(writeStream, {dot_stuffing: true});
writeStream.on("close", function () {
haraka_log('main writeStream.on("close"...', 'File Saved!', filename);
http_post_file(filename);
next(OK);
});//writeStream.on("close", function()
};//exports.hook_queue = function(next, connection, params) {