i'm using file-saver package to download files. The downloading is not the issue it seems to be the opening of any file. I console.log file from the files function logic below and get this:
File {name: '5ece9322f34d050a92546892.jpeg', lastModified: 1641918175691, lastModifiedDate: Tue Jan 11 2022 16:22:55 GMT+0000 (Greenwich Mean Time), webkitRelativePath: '', size: 156, …}
lastModified: 1641918175691
lastModifiedDate: Tue Jan 11 2022 16:22:55 GMT+0000 (Greenwich Mean Time)
[[Prototype]]: Object
name: "5ece9322f34d050a92546892.jpeg"
size: 156
type: ".jpeg"
webkitRelativePath: ""
[[Prototype]]: File
I get the following error:
The file 5ece9322f34d050a92546892.jpeg could not be opened.It may be damaged or use a file format that Preview doesn’t recognise.
My code:
import { saveAs } from 'file-saver';
const files = ({url, fileName}) => {
const extension = url.slice(url.lastIndexOf('.'));
const handleDownloadDocument = (fileUrl, name, ex) => {
const file = new File([fileUrl], name, { type: ex });
return saveAs(file);
};
return(<div onClick={() => handleDownloadDocument(url, fileName, extension)}> download </div>);
};
Related
I'm currently using Node.js to serve a webpage that takes in user inputs which are stored on a mongodb server. The web page also displays specified or all user inputs entered. I'm trying to figure how to pass the user inputs from node.js to the <p> element.
In my node.js file I am responding with the user data as a string like so:
response.writeHead(200, {"Content-Type": "text/plain"});
response.write(stringifyMongoDBCollection(user_data_collection));
response.end();
When I do this, this re-directs the client to display the content as text/plain which I expected. The next step is to update just the content of <p>. How can I do this? I thought about re-serving the entire html content with the new populated <p> but that would make all current user inputs disappear...
The user data would be a mongodb collection array and look like this:
[ { _id: 5dda17065f7e9b64282e7291,
date: 'Sat Nov 23 2019 21:37:10 GMT-0800 (Pacific Standard Time)',
field: '127' },
{ _id: 5dda18ecf330d521a035c444,
date: 'Sat Nov 23 2019 21:45:16 GMT-0800 (Pacific Standard Time)',
field: 125},
{ _id: 5dda1951f330d521a035c445,
date: 'Sat Nov 23 2019 21:46:57 GMT-0800 (Pacific Standard Time)',
field: '111' } ]
You could do something like this.
In Node section
res.status(200).send(stringifyMongoDBCollection(user_data_collection));
Client side
function getContent() {
$.ajax({
url: "https://jsonplaceholder.typicode.com/todos",
success: function (res) {
if (res) {
res = res.slice(0, 5); // limiting data to 5
var val = '';
res.forEach(todo => {
val += '<p><b>Title:</b>' + todo.title + ' <b>Completed:</b> ' + todo.completed + '</p>';
});
}
$("#content").html(val);
},
error: function () {
var val = '<p>Error in loading content</p>'
$("#content").html(val);
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="getContent()">Get Content</button>
<h1>Todo</h1>
<div id="content"></div>
References
jQuery ajax() Method
Node.js - Response Object
AJAX Introduction
I have a function that fires and receives the e.target.files object but I cannot get the length of it. console.log(e.target.files.length) does not even fire.
<input multiple onChange={(e) => { this.handlefileupload(e) }} type="file" id="file" style={{ display: "none" }} />
this.handlefileupload = (e) => {
console.log(e.target.files)
console.log(e.target.files.length)
}
console.log(e.target.files) gives:
FileList {0: File(7105138), 1: File(7105138), 2: File(16792776), length: 3}0: File(7105138) {name: "image1.jpg", lastModified: 1544552208803, lastModifiedDate: Tue Dec 11 2018 10:16:48 GMT-0800 (Pacific Standard Time), webkitRelativePath: "", size: 7105138, …}1: File(7105138) {name: "imge2.jpg", lastModified: 1544468259102, lastModifiedDate: Mon Dec 10 2018 10:57:39 GMT-0800 (Pacific Standard Time), webkitRelativePath: "", size: 7105138, …}2: File(16792776) {name: "image3.png", lastModified: 1544558528903, lastModifiedDate: Tue Dec 11 2018 12:02:08 GMT-0800 (Pacific Standard Time), webkitRelativePath: "", size: 16792776, …}length: 3__proto__: FileList
Snapshot of console.log(e.target.files) as requested
I run a sample similar to your code, it seems like nothing is broken and actually I could get the length.
https://codesandbox.io/s/0m087x84vw
You might need to provide more code to help us detect where is the problem
It looks like you might of meant to type console.log(e.target.files.FileList.length) .
I am trying to make use of the getObject SDK method to collect an XML file that is in a foreign language (Czech) and encoding (windows-1250) and convert it into UTF-8 (within a Lambda later)
Experimenting with setting the S3 Bucket File's encoding to match the XML Version:
is proving problematic, because the documentation is so limited. There are very few examples and I am struggling to find documentation to align what STRING_VALUE is eg. utf8 or UTF-8 etc.
Does anyone have Examples or a format for encoding/language to follow?
Thanks
ResponseContentEncoding — (String) Sets the Content-Encoding header
of the response.
ResponseContentLanguage — (String) Sets the Content-Language header
of the response.
ResponseContentType — (String) Sets the Content-Type header of the
response.
(Below is the example from the AWS SDK Docs)
var params = {
Bucket: 'STRING_VALUE', /* required */
Key: 'STRING_VALUE', /* required */
IfMatch: 'STRING_VALUE',
IfModifiedSince: new Date || 'Wed Dec 31 1969 16:00:00 GMT-0800 (PST)' || 123456789,
IfNoneMatch: 'STRING_VALUE',
IfUnmodifiedSince: new Date || 'Wed Dec 31 1969 16:00:00 GMT-0800 (PST)' || 123456789,
Range: 'STRING_VALUE',
RequestPayer: 'requester',
ResponseCacheControl: 'STRING_VALUE',
ResponseContentDisposition: 'STRING_VALUE',
ResponseContentEncoding: 'STRING_VALUE',
ResponseContentLanguage: 'STRING_VALUE',
ResponseContentType: 'STRING_VALUE',
ResponseExpires: new Date || 'Wed Dec 31 1969 16:00:00 GMT-0800 (PST)' || 123456789,
SSECustomerAlgorithm: 'STRING_VALUE',
SSECustomerKey: new Buffer('...') || 'STRING_VALUE',
SSECustomerKeyMD5: 'STRING_VALUE',
VersionId: 'STRING_VALUE'
};
s3.getObject(params, function(err, data) {
if (err) console.log(err, err.stack); // an error occurred
else console.log(data); // successful response
});
Using the Filesystem API of Tizen SDK, I'm getting a javascript File object that prints the following datas on console.log:
File
created: Thu Dec 14 2017 09:59:51 GMT+0100 (CET)
fullPath: "/opt/share/folder/image.jpg"
get fileSize: function fileSizeGetter() {var _realPath=commonFS_.toRealPath(this.fullPath);var _result=native_.callSync('File_statSync',{location:_realPath});var _aStatObj=native_.getResultObject(_result);return _aStatObj.isFile?_aStatObj.size:undefined;}
isDirectory: false
isFile: true
length: undefined
mode: "rw"
modified: Thu Dec 14 2017 09:59:51 GMT+0100 (CET)
name: "image.jpg"
parent: File
path: "/opt/share/folder/"
readOnly: false
set fileSize: function () {}
__proto__: File
Problem is that the length of the File is undefined. This cause my Filereader readyState to stay at 0 (EMPTY) state (or maybe the problem is somewhere else).
Why is my code returning undefined for length parameter?
My code:
tizen.filesystem.resolve('/opt/share/folder/image.jpg', function(file) {
console.log(file);
var reader = new FileReader();
console.log(reader);
reader.readAsArrayBuffer(file);
reader.onload = fileLoad;
reader.onerror = function(evt){
console.log(evt.target.error.name);
}
});
Console value for reader:
FileReader
constructor: FileReaderConstructor
error: null
onabort: null
onerror: function (evt) {
onload: function fileLoad(evt) {
onloadend: null
onloadstart: null
onprogress: null
readyState: 0
result: null
__proto__: FileReaderPrototype
Precision:
Using the file url to insert image in a canvas is working and the file is existing on device
According to the documentation, length is for File instances representing directories (it tells you how many files and directories the directory contains). For a File actually representing a file, you'd use fileSize.
I don't see a FileReader anywhere in the Tizen file system documentation. Instead, examples reading and writing files use a FileStream via openStream.
I'm using Dropzone.js for uploading files. Now I want to do some additional validation for some files. But I didn't found a way to get the absolute path of selected file. Please anyone tell me whether there have any way to get the file path.
This is the file array returned by dropzone when we add a file
accepted: true
lastModifiedDate: Wed Dec 17 2014 13:01:03 GMT+0530 (IST)
name: "xxxxxx.pdf"
previewElement: div.dz-preview.dz-file-preview.dz-processing
previewTemplate: div.dz-preview.dz-file-preview.dz-processing
processing: true
size: 407552
status: "uploading"
type: "application/pdf"
upload: ObjectwebkitRelativePath: ""
xhr: XMLHttpRequest
__proto__: File
The full path comes through in the POST data:
Dropzone.options.yourDropzoneID = {
init: function() {
this.on("sending", function(file, xhr, data) {
if(file.fullPath){
data.append("fullPath", file.fullPath);
}
});
}
};