I have implemented initFiles to display already s3 uploaded files, but actual image thumbnails are not showing. Also, I can not click on the default thumbnail that is shown (see image). How can I see actual images and link works?
I have below JS snippet
session: {
endpoint: "http://localhost/app/ci/php-s3-server/endpoint-cors.php?filelist"
},
Response from endpoint-cors.php?filelist call is...
[{"name":"art_collage.png","uuid":"e3554aa0-c025-4653-bb71-4afe9d979f06","s3Key":"test\/e3554aa0-c025-4653-bb71-4afe9d979f06.png","s3Bucket":"kidkivetest"},{"name":"process_step_2.png","uuid":"e5d84dd7-458c-4601-9168-e16e747134d0","s3Key":"test\/e5d84dd7-458c-4601-9168-e16e747134d0.png","s3Bucket":"xx_my_bucket_xx"}]
S3 bucket structure has 2 images:
All Buckets /xx_my_bucket_xx/test
e3554aa0-c025-4653-bb71-4afe9d979f06.png
e5d84dd7-458c-4601-9168-e16e747134d0.png
If you would like to display thumbnails in your initial files list, you must provide a thumbnailUrl for each file in the list. For example:
[{"name":"art_collage.png","uuid":"e3554aa0-c025-4653-bb71-4afe9d979f06","s3Key":"test\/e3554aa0-c025-4653-bb71-4afe9d979f06.png","s3Bucket":"kidkivetest", "thumbnailUrl": "http://mys3bucket.com/art_collage.png"}...]
Related
I'm webscrapping data about ski resorts from a site, also getting some pictures. I am saving those pictures in a folder and after that i'm getting them in SQLite database through an imageField.
The bad part is that they don't work
directory = r'C:\Users\tiberiu.ghimbas\Documents\Resorts img5'
image_list = [cv2.imread(file) for file in
glob.glob(r'C:/Users/tiberiu.ghimbas/Documents/Resorts img5/*.png')]
This list is then looped and insertet item by item.
I'm doing all the correct settings for handling images and media files.
I know that by going the classic way of uploading images through a form will get you in the database the path to the image from de media/"upload_to = 'filename'" folder but going by my way i'm getting only them image name.
How can i solve that ?
I saved an image in a SQLite database in the smartphone as TEXT with the name Path.
I tried saving it in to ways:
require('../assets/icon.png')
'../assets/icon.png'
For the first method, when calling it on an Image component I use it like this:
<Image source={item.Path} />
Its value is for example 10.0 when using console.log to visualize it.
And I get the following error:
Warning: Failed prop type: Invalid prop `source` supplied to `Image`.
But after adding another image, to the database, all the images will load. It doesn't work only when I start the app.
For the second method:
<Image source={require(`${item.Path}`)}
And I get the following error:
Invalid call at line 130: require("" + item.Path)
I have searched but can't find a optimal way to store an image path in the database and later use it in a Image component.
For what I understand here you're trying to use local path of your images from your database inside your react native project. If I'm correct it can't work, you can't use local path of a distant directory, the api only serve the path not the file itself.
What I would do it's using amazon S3 bucket to upload static files, images in your case and you save the url of the uploaded images in your database. Then you call images in your code like this :
source={{ uri: "http://file.jpg" }}
I am currently downloading a gltf from Google drive using the Google Drive API. I can print in the console the gltf file as text but I can't seem to be able to parse it and actually visualize it in three.js. I have used GLTFLoader.parse and GLTFLoader.load but both give errors about the json. Is there a workflow for reading files from their content without loading them from a URL?
the response I am getting back from google-drive looks like that:
response body image
Is there a workflow for reading files from their content without loading them from a URL?
Yes. The idea is to directly call the parse() method with the respective content. The three.js editor is using this approach during file import. The normal approach for this is:
const loader = new GLTFLoader();
loader.parse( contents, '', ( gltf ) => {
const model = gltf.scene;
scene.add( model );
} );
contents can be of type string or ArrayBuffer.
I'm making a project in React Native that creates a table with some data, and I need to create a pdf with that table and be able to download/export that pdf.
Currently i'm using https://github.com/christopherdro/react-native-html-to-pdf, but its downloading to cache directory, even if i change to docs.
I was searching and some people say that u need to use file manager to download a pdf.
Can someone help me?
From docs, you have to specify "Documents" directory if you want it to be saved on Documents dir of ios/android.
async createPDF() {
let options = {
html: '<table><tr><th>Firstname</th><th>Lastname</th></tr></table>',
fileName: 'tableTest',
directory: 'Documents',
};
let file = await RNHTMLtoPDF.convert(options)
alert(file.filePath);
}
Since you are creating this table in your react native code, you don't need to download anything from anywhere. Cache directory is your phone's cache directory, so I can't understand from where you want to download the pdf.
Is there any other way that I can just check the size of a file before upload? The requirement is if the file exceeded the limit, the form mustn't submit. If it's not, I have to do the ordinary upload using the form and I don't have to exactly upload the file to the server using Flash.
Is there any other way that I can just check the size of a file before upload?
Not in JavaScript, the file size is not in the DOM.
when instantiating SWFUpload, there are two parameters you need to pass: file_size_limit, and file_queue_error_handler:
new SWFUpload({
file_size_limit: "10 MB",
file_queue_error_handler: queueErrorHandler,
[...]
})
and then:
function queueErrorHandler(file, errorCode) {
if (errorCode == SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT) {
alert("File exceeds the 10MB limit!");
}
}
this checks if the file size is within limits before starting the upload
with the W3C FileAPI (implemented at least by Firefox 3.6) you can.
See this link for details
http://hacks.mozilla.org/2009/12/w3c-fileapi-in-firefox-3-6/
Cheers
Checking the file size through the SWFUpload control is possible. Just put the SWFUpload control outside of the Web form tags. Tell the user click on the SWFUpload button and point to his upload file. Use javascript to determine the file size, then utilize this information as you see fit such as populating a validation function. Then your main form will need to ask the user to point to their upload file again, and it is this field which will do the actual uploading of the file. When the form is submitted, the SWFUpload control will be completely ignored since it's not part of the main form.