I already have a function that download several files separeted.
I need to download it wrapped into an unique zip file. Can somebody help me with that?
This is what a get so far:
service.ts
download(mercado: string, data: Date, formato: string): Observable<Blob> {
const _data = formatDate(data, 'yyyy-MM-dd', 'pt');
return this.http
.get(`${API_URL}/api/nota-de-corretagem/download/${mercado}/${_data}/${formato}`, {
responseType: 'blob'
});
}
component.ts
download(notas: Models.NotaDeCorretagem[]) {
let notasChecked = notas.filter(f => f.selected === true);
notas
.filter(n => n.selected === true)
.forEach(n => {
this.notsvc.download(n.mercado, n.data, 'pdf')
.subscribe(
(blob) => {
var url = window.URL.createObjectURL(blob);
var a = document.createElement('a');
document.body.appendChild(a);
a.setAttribute('style', 'display: none');
a.href = url;
a.download = n.mercado + '_' + moment(n.data).format('YYYY-MM-DD') + '.pdf';
a.click();
window.URL.revokeObjectURL(url);
a.remove();
this.erro = false;
},
(err) => {
console.log('download error:', JSON.stringify(err));
this.erro = true;
}
);
});
}
Related
I am using mutler to upload image with post request and also string data.
When I upload only the image with Postman or React, it is working, but when I send also the strings, it shows this:
undefined
TypeError: Cannot read properties of undefined (reading 'filename')
The string got saved to MySQL but not the image.
That's my code for the Multer:
let storage = multer.diskStorage({
destination: (req, file, callBack) => {
callBack(null, './public/images/')
},
filename: (req, file, callBack) => {
const mimeExtension = {
'image/jpeg': '.jpeg',
'image/jpg': '.jpg',
'image/png': '.png',
'image/gif': '.gif',
}
callBack(null, file.originalname)
}
})
let upload = multer({
storage: storage,
fileFilter: (req, file, callBack) => {
// console.log(file.mimetype)
if (file.mimetype === 'image/jpeg' ||
file.mimetype === 'image/jpg' ||
file.mimetype === 'image/png' ||
file.mimetype === 'image/gif') {
callBack(null, true);
} else {
callBack(null, false);
req.fileError = 'File format is not valid';
}
}
});
And that's my post request:
router.post('/', upload.single('image'), async (req, res) => {
try {
if (!req.file) {
console.log("You didnt upload a picture for your project");
}
const { title, about_the_project, project_link, user_id } = req.body
const projectnum = await SQL(`INSERT into project(title,about_the_project,project_link,user_id)
VALUES('${title}','${about_the_project}','${project_link}',${user_id}) `)
console.log(projectnum.insertId);
console.log(req.file && req.file.filename)
let imagesrc = 'http://127.0.0.1:5000/images/' + req.file && req.file.filename
await SQL(`UPDATE project SET image = '${imagesrc}' WHERE projectid = ${projectnum.insertId}`)
res.send({ msg: "You add a new project" })
} catch (err) {
console.log(err);
return res.sendStatus(500)
}
})
On React that's the code:
const PostNewProject = async () => {
let formData = new FormData()
formData.append('image', imgsrc)
const res = await fetch(`http://localhost:5000/project`, {
headers: { 'content-type': 'application/json' },
method: "post",
body: JSON.stringify({ title, about_the_project, project_link, languages, user_id }),formData,
// credentials: "include"
})
const data = await res.json()
if (data.err) {
document.getElementById("err").innerHTML = data.err
} else {
console.log(data);
document.getElementById("err").innerHTML = data.msg
}
}
And the input for the image upload
<Input
type='file'
name='image'
sx={{ width: '25ch' }}
onChange={(e) => setImgsrc(e.target.files[0])}
/>
Thank you for your help!
You did not write a comma after the filename and before the callback function in the Multer.
I think you should check you exports too.
I have an API which is returning uploaded file as blob. When I try to bind src with blob URL then it does not show anything, however, when I try to bind direct URL then it can show PDF file. Here is my code given below.
My TS code
downloadFile(fileData: Fileuploader) {
this.tempBlob= null;
//Fetching Data File
this.apiservice.getDownloadfile(fileData).subscribe(
(retFileData: any) => {
this.tempRetFileData = retFileData;
this.tempBlob = new Blob([retFileData], { type: this.contentType });
},
(err: Error) => {
},
() => {
const blob: Blob = new Blob([this.tempBlob], { type: this.contentType });
const fileName: string ='ilvsna.pdf';
this.myBlobURL = URL.createObjectURL(blob);
}
);
}
HTML
<pdf-viewer [src]="myBlobURL"
[render-text]="true"
[original-size]="false"
style="width: 400px; height: 500px"
></pdf-viewer>
Note: if I set myBlobURL URL to 'https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf' then it can display
I think I have a solution for you. You can use ArrayBuffer. #N.F. Code is correct, however, you said that you got error in the line => this.pdfSrc = new Uint8Array(fileReader.result);
So, change the line into => this.pdfSrc = new Uint8Array(fileReader.result as ArrayBuffer);.Finally, your ts code should look like below=>
downloadFile(fileData: Fileuploader) {
this.tempBlob= null;
//Fetching Data File
this.apiservice.getDownloadfile(fileData).subscribe(
(retFileData: any) => {
this.tempRetFileData = retFileData;
this.tempBlob = new Blob([retFileData], { type: this.contentType });
const fileReader = new FileReader();
fileReader.onload = () => {
this.pdfSrc = new Uint8Array(fileReader.result as ArrayBuffer);
};
fileReader.readAsArrayBuffer(this.tempBlob);
},
(err: Error) => {
}
);
}
Try this.
ts
pdfSrc: Uint8Array;
downloadFile(fileData: Fileuploader) {
this.tempBlob= null;
//Fetching Data File
this.apiservice.getDownloadfile(fileData).subscribe(
(retFileData: any) => {
this.tempRetFileData = retFileData;
this.tempBlob = new Blob([retFileData], { type: this.contentType });
const fileReader = new FileReader();
fileReader.onload = () => {
this.pdfSrc = new Uint8Array(fileReader.result as ArrayBuffer);
};
fileReader.readAsArrayBuffer(this.tempBlob);
},
(err: Error) => {
}
);
}
html
<pdf-viewer [src]="pdfSrc"
[render-text]="true"
[original-size]="false"
style="width: 400px; height: 500px"
></pdf-viewer>
I resolve with window.URL.createObjectURL of my return blob file from service:
-- ts file
this.obuService.getObuDocument(obuId, fileId).subscribe(
(data: HttpResponse<Blob>) => {
const url = window.URL.createObjectURL(data.body);
this.src = url;
this.viewPDF = true;
}
);
-- service
getObuDocument(obuId: number, fileId: number): Observable<any> {
const options = {
observe: 'response' as 'body',
Accept: 'application/pdf',
responseType: 'blob' as 'blob'
};
return this.http.get(this.apiUrl + '/' + obuId + '/upload/' + fileId, options)
.pipe(catchError(err => { throw err; }));
}
I am new in angular. I want to store image data on local storage.
localStorage.setItem("imgData", JSON.stringify(this.files));
this saving data but no value.
how do I save please help
I have something similar to your issue, it could help you.
renderPNG(fileName: string) {
let reader = new FileReader();
reader.addEventListener("load", () = > {
this.files = reader.result;
localStorage.setItem('imgData', JSON.stringify(this.files));
}, false);
this.files = JSON.parse(localStorage.getItem('imgData'));
if (!this.files) {
this.downloadService.downloadFileSystem(fileName, 'png')
.subscribe(response = > {
if (response && response.body.size > 0) {
reader.readAsDataURL(response.body);
}
});
}
}
use fetch
fetch('http://cors-anywhere.herokuapp.com/https://lorempixel.com/640/480/?60789', {
headers: {},
}).then((response) => {
return response.blob();
}).then((blob) => {
console.log(blob);
}).catch((e) => console.log(e));
and save the blob with
https://www.npmjs.com/package/fs-web
await fs.writeFile(this.dirPath + '/' + fileName, blob);
read file and get url
await fs.readString(this.dirPath + '/' + fileName).then(async (blob: Blob) => {
if (!!blob) {
if (blob.type === 'text/html' || blob.type === 'application/octet-stream') {
await fs.removeFile(this.dirPath + '/' + fileName);
} else {
const url = window.URL.createObjectURL(blob);
}
}
}).catch((err) => {
throw (err);
});
Reference used in library for IonicFramework https://www.npmjs.com/package/ion-media-cache
Refering to this post, [Download all the derivatives for the purpose of the using Forge Viewer offline/C#, I know that the files provided by derivative api "GET :urn/manifest/:derivativeurn" are enough for offline viewing. However using the same as input in offline viewer isn't working. Analyzing the demo at https://extract.autodesk.io for existing sample files indicated that downloaded bubble has other files too like bin/pack/zip/ json, where can I get these files using C# Api ? Uploading a sample file and using model extractor returned error ("Cannot GET /extracted/1906495-seatdwf.zip")[As per the suggestion, tried extract.autodesk.io version of March 24,but to no use.]
Please guide on how to download required files for offline viewing using C#.
Thanks in advance.
Here is a clear commented Node.js version in ES6+async of the extractor that I wrote inspired from extract.autodesk.io:
import BaseSvc from './BaseSvc'
import archiver from 'archiver'
import Forge from 'forge-apis'
import request from 'request'
import mkdirp from 'mkdirp'
import Zip from 'node-zip'
import Zlib from 'zlib'
import path from 'path'
import _ from 'lodash'
import fs from 'fs'
export default class ExtractorSvc extends BaseSvc {
/////////////////////////////////////////////////////////
//
//
/////////////////////////////////////////////////////////
constructor (config) {
super (config)
this.derivativesAPI = new Forge.DerivativesApi()
}
/////////////////////////////////////////////////////////
//
//
/////////////////////////////////////////////////////////
name () {
return 'ExtractorSvc'
}
/////////////////////////////////////////////////////////
// Create directory async
//
/////////////////////////////////////////////////////////
mkdirpAsync (dir) {
return new Promise((resolve, reject) => {
mkdirp(dir, (error) => {
return error
? reject (error)
: resolve()
})
})
}
/////////////////////////////////////////////////////////
// download all URN resources to target directory
// (unzipped)
//
/////////////////////////////////////////////////////////
download (getToken, urn, directory) {
return new Promise (async (resolve, reject) => {
// make sure target dir exists
await this.mkdirpAsync (directory)
// get token, can be object token or an async
// function that returns the token
const token = ((typeof getToken == 'function')
? await getToken()
: getToken)
// get URN top level manifest
const manifest =
await this.derivativesAPI.getManifest (
urn, {}, {autoRefresh:false}, token)
// harvest derivatives
const derivatives = await this.getDerivatives (
getToken, manifest.body)
// format derivative resources
const nestedDerivatives = derivatives.map((item) => {
return item.files.map((file) => {
const localPath = path.resolve(
directory, item.localPath)
return {
basePath: item.basePath,
guid: item.guid,
mime: item.mime,
fileName: file,
urn: item.urn,
localPath
}
})
})
// flatten resources
const derivativesList = _.flattenDeep(
nestedDerivatives)
// creates async download tasks for each
// derivative file
const downloadTasks = derivativesList.map(
(derivative) => {
return new Promise(async(resolve) => {
const urn = path.join(
derivative.basePath,
derivative.fileName)
const data = await this.getDerivative(
getToken, urn)
const filename = path.resolve(
derivative.localPath,
derivative.fileName)
await this.saveToDisk(data, filename)
resolve(filename)
})
})
// wait for all files to be downloaded
const files = await Promise.all(downloadTasks)
resolve(files)
})
}
/////////////////////////////////////////////////////////
// Parse top level manifest to collect derivatives
//
/////////////////////////////////////////////////////////
parseManifest (manifest) {
const items = []
const parseNodeRec = (node) => {
const roles = [
'Autodesk.CloudPlatform.DesignDescription',
'Autodesk.CloudPlatform.PropertyDatabase',
'Autodesk.CloudPlatform.IndexableContent',
'leaflet-zip',
'thumbnail',
'graphics',
'preview',
'raas',
'pdf',
'lod',
]
if (roles.includes(node.role)) {
const item = {
guid: node.guid,
mime: node.mime
}
const pathInfo = this.getPathInfo(node.urn)
items.push (Object.assign({}, item, pathInfo))
}
if (node.children) {
node.children.forEach ((child) => {
parseNodeRec (child)
})
}
}
parseNodeRec({
children: manifest.derivatives
})
return items
}
/////////////////////////////////////////////////////////
// Collect derivatives for SVF
//
/////////////////////////////////////////////////////////
getSVFDerivatives (getToken, item) {
return new Promise(async(resolve, reject) => {
try {
const svfPath = item.urn.slice (
item.basePath.length)
const files = [svfPath]
const data = await this.getDerivative (
getToken, item.urn)
const pack = new Zip (data, {
checkCRC32: true,
base64: false
})
const manifestData =
pack.files['manifest.json'].asNodeBuffer()
const manifest = JSON.parse (
manifestData.toString('utf8'))
if (manifest.assets) {
manifest.assets.forEach((asset) => {
// Skip SVF embedded resources
if (asset.URI.indexOf('embed:/') === 0) {
return
}
files.push(asset.URI)
})
}
return resolve(
Object.assign({}, item, {
files
}))
} catch (ex) {
reject (ex)
}
})
}
/////////////////////////////////////////////////////////
// Collect derivatives for F2D
//
/////////////////////////////////////////////////////////
getF2dDerivatives (getToken, item) {
return new Promise(async(resolve, reject) => {
try {
const files = ['manifest.json.gz']
const manifestPath = item.basePath +
'manifest.json.gz'
const data = await this.getDerivative (
getToken, manifestPath)
const manifestData = Zlib.gunzipSync(data)
const manifest = JSON.parse (
manifestData.toString('utf8'))
if (manifest.assets) {
manifest.assets.forEach((asset) => {
// Skip SVF embedded resources
if (asset.URI.indexOf('embed:/') === 0) {
return
}
files.push(asset.URI)
})
}
return resolve(
Object.assign({}, item, {
files
}))
} catch (ex) {
reject (ex)
}
})
}
/////////////////////////////////////////////////////////
// Get all derivatives from top level manifest
//
/////////////////////////////////////////////////////////
getDerivatives (getToken, manifest) {
return new Promise(async(resolve, reject) => {
const items = this.parseManifest(manifest)
const derivativeTasks = items.map((item) => {
switch (item.mime) {
case 'application/autodesk-svf':
return this.getSVFDerivatives(
getToken, item)
case 'application/autodesk-f2d':
return this.getF2dDerivatives(
getToken, item)
case 'application/autodesk-db':
return Promise.resolve(
Object.assign({}, item, {
files: [
'objects_attrs.json.gz',
'objects_vals.json.gz',
'objects_offs.json.gz',
'objects_ids.json.gz',
'objects_avs.json.gz',
item.rootFileName
]}))
default:
return Promise.resolve(
Object.assign({}, item, {
files: [
item.rootFileName
]}))
}
})
const derivatives = await Promise.all(
derivativeTasks)
return resolve(derivatives)
})
}
/////////////////////////////////////////////////////////
// Generate path information from URN
//
/////////////////////////////////////////////////////////
getPathInfo (encodedURN) {
const urn = decodeURIComponent(encodedURN)
const rootFileName = urn.slice (
urn.lastIndexOf ('/') + 1)
const basePath = urn.slice (
0, urn.lastIndexOf ('/') + 1)
const localPathTmp = basePath.slice (
basePath.indexOf ('/') + 1)
const localPath = localPathTmp.replace (
/^output\//, '')
return {
rootFileName,
localPath,
basePath,
urn
}
}
/////////////////////////////////////////////////////////
// Get derivative data for specific URN
//
/////////////////////////////////////////////////////////
getDerivative (getToken, urn) {
return new Promise(async(resolve, reject) => {
const baseUrl = 'https://developer.api.autodesk.com/'
const url = baseUrl +
`derivativeservice/v2/derivatives/${urn}`
const token = ((typeof getToken == 'function')
? await getToken()
: getToken)
request({
url,
method: 'GET',
headers: {
'Authorization': 'Bearer ' + token.access_token,
'Accept-Encoding': 'gzip, deflate'
},
encoding: null
}, (err, response, body) => {
if (err) {
return reject(err)
}
if (body && body.errors) {
return reject(body.errors)
}
if ([200, 201, 202].indexOf(
response.statusCode) < 0) {
return reject(response)
}
return resolve(body || {})
})
})
}
/////////////////////////////////////////////////////////
// Save data to disk
//
/////////////////////////////////////////////////////////
saveToDisk (data, filename) {
return new Promise(async(resolve, reject) => {
await this.mkdirpAsync(path.dirname(filename))
const wstream = fs.createWriteStream(filename)
const ext = path.extname(filename)
wstream.on('finish', () => {
resolve()
})
if (typeof data === 'object' && ext === '.json') {
wstream.write(JSON.stringify(data))
} else {
wstream.write(data)
}
wstream.end()
})
}
/////////////////////////////////////////////////////////
// Create a zip
//
/////////////////////////////////////////////////////////
createZip (rootDir, zipfile, zipRoot, files) {
return new Promise((resolve, reject) => {
try {
const output = fs.createWriteStream(zipfile)
const archive = archiver('zip')
output.on('close', () => {
resolve()
})
archive.on('error', (err) => {
reject(err)
})
archive.pipe(output)
if (files) {
files.forEach((file) => {
try {
const rs = fs.createReadStream(file)
archive.append(rs, {
name:
`${zipRoot}/${file.replace(rootDir, '')}`
})
} catch(ex){
console.log(ex)
}
})
} else {
archive.bulk([ {
expand: false,
src: [rootDir + '/*']
}])
}
archive.finalize()
} catch (ex) {
reject(ex)
}
})
}
}
An example of use is as follow:
// name of model to download
const name = 'MyForgeModel'
// URN of model to download
const urn = 'dXGhsujdj .... '
// Get Forge service
const forgeSvc = ServiceManager.getService(
'ForgeSvc')
// getToken async function
const getToken = () => forgeSvc.get2LeggedToken()
// Get Extractor service
const extractorSvc = ServiceManager.getService(
'ExtractorSvc')
// target path to download SVF
const dir = path.resolve(__dirname, `${name}`)
// perform download
const files = await extractorSvc.download(
getToken, urn, dir)
// target zipfile
const zipfile = dir + '.zip'
// zip all files
await extractorSvc.createZip(
dir, zipfile, name, files)
// remove downloaded resources directory
rmdir(dir)
I am trying to upload a csv/xlxs file in angular 2 but whenever i submit the file, i get an exception file could not upload. please try again from my backend although it works fine on postman. What could be wrong in my code?
//service
constructor (private authenticate:AuthenticationService) {
this.filetrack = Observable.create(observer => {
this.progressObserver = observer
}).share();
}
SendRequest (url: string, params: string[], files: File[]) {
return Observable.create(observer => {
let formData: FormData = new FormData(),
xhr: XMLHttpRequest = new XMLHttpRequest();
for (let i = 0; i < files.length; i++) {
formData.append("uploads[]", files[i], files[i].name);
}
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
observer.next(JSON.parse(xhr.response));
observer.complete();
} else {
observer.error(xhr.response);
}
}
};
xhr.upload.onprogress = (event) => {
this.progress = Math.round(event.loaded / event.total * 100);
this.progressObserver.next(this.progress);
};
xhr.open('POST', url, true);
xhr.setRequestHeader('Authorization', 'Bearer ' + this.authenticate.user_token);
xhr.send(formData);
});
}
}
//component
export class FileUploadComponent {
constructor(private service:FileUploadService) {
this.service.filetrack.subscribe(
data => {
console.log('progress = '+data);
});
}
onChange(event) {
console.log('onChange');
let files = event.target.files;
console.log(files);
this.service.SendRequest('http://localhost:8000/register/v1/file/country', [], files).subscribe(() => {
console.log('sent');
});
}
}
You have to set another header to be able to upload a file:
xhr.setRequestHeader("Content-Type", "multipart/form-data");