the file will not shown in the code just it name will appair in ctx.meta , but after passing it in the pipe => ctx.params.pipe(f); you will find it ur destination folder
first of all you need to import
import path from "path";
import fs from 'fs';
handler(ctx: any): any {
// to see your params
console.log({
multipart:ctx.meta.$multipart,
params:ctx.params,
$params: ctx.meta.$params,
meta:ctx.meta
});
// here is the tricks
return new Promise((resolve, reject) => {
const filePath = path.join("destination_folder_here", ctx.meta.filename );
const f = fs.createWriteStream(filePath);
f.on("close", () => {
resolve({
multipart:ctx.meta.$multipart,
params:ctx.params,
$params: ctx.meta.$params,
meta:ctx.meta
});
});
ctx.params.on("error", (err: any) => {
console.log(" error ", err.message);
reject(err);
f.destroy(err);
});
ctx.params.pipe(f);
});
}
You can upload simply with jQuery `.ajax()`.
HTML:
<!-- language: lang-html -->
<form id="upload-form">
<div>
<label for="file">File:</label>
<input type="file" id="file" name="file" />
<progress class="progress" value="0" max="100"></progress>
</div>
<hr />
<input type="submit" value="Submit" />
</form>
CSS
<!-- language: lang-css -->
.progress { display: none; }
Javascript:
<!-- language: lang-javascript -->
$(document).ready(function(ev) {
$("#upload-form").on('submit', (function(ev) {
ev.preventDefault();
$.ajax({
xhr: function() {
var progress = $('.progress'),
xhr = $.ajaxSettings.xhr();
progress.show();
xhr.upload.onprogress = function(ev) {
if (ev.lengthComputable) {
var percentComplete = parseInt((ev.loaded / ev.total) * 100);
progress.val(percentComplete);
if (percentComplete === 100) {
progress.hide().val(0);
}
}
};
return xhr;
},
url: 'upload.php',
type: 'POST',
data: new FormData(this),
contentType: false,
cache: false,
processData: false,
success: function(data, status, xhr) {
// ...
},
error: function(xhr, status, error) {
// ...
}
});
}));
});
