I upload my images like this:
CloudinaryResponse response = await this.url.uploadImage(filePath,
filename: "background",
folder: "alquileres/$userId/$portfolioId/$investmentId");
The image names are "background_longID". I'd like to overwrite all the images.
I've found an old issue in Github but doesn't provide too much info (https://github.com/cloudinary/cloudinary_ios/issues/87)
You can find details about the upload and various flags for upload on the documentation page at https://cloudinary.com/documentation/image_upload_api_reference#upload_method.
If the primary concern is that you don't want Cloudinary to add the _longId parameter to the file name, you can set the flag unique_filename=false during the upload.
Another flag that you should consider is overwrite. By default, this flag is set to false. So when you re-upload, the old image is not replaced. You could set the flag overwrite=true as well to ensure that the new image is uploaded correctly.
Cloudinary doesn't support integration with flutter. there are some third parties that you can use for example here: https://gist.github.com/Wizpna/eab058e15cc1533bdb73bf764078f642
If you would like to upload images to Cloudinary, our best practice is to add an upload widget. You can read more about it here:
https://cloudinary.com/documentation/upload_widget
For someone who might be having the same issue, here is what i did
CloudinaryClient client = new CloudinaryClient(<API_KEY>, <API SECRET>, <CLOUD NAME>);
await client.uploadImage( file.path, filename: <NAME_FOR_PHOTO>, folder: <FOLDER_NAME(OPTIONAL)>)
.then((result){
print("CLOUDINARY:: ${result.secure_url}==> result");
})
.catchError((error) => print("ERROR_CLOUDINARY:: $error"));
You can use this package https://pub.dev/packages/cloudinary_public which does not require your API_KEY or API_SECRET
Related
its a bit confusing to upload a photo and access it from appwrite storage, I have created photo buckets in the app and I have copied the code of the preview image from the console and pasted in vscode to run, but as I'm very new to this I couldn't figure out, if I should be using the 'get' method as shown in the console , and the function I should be executing should be buckets.create right? please help me with any link of process or just give me some hints to move further .
Thank you
Using version 8.1.0 of the Appwrite Node SDK on Appwrite version 1.0.x, you would create a file with the Create File API like this:
const { Client, Databases, Storage, InputFile, ID } = require('node-appwrite');
const client = new Client()
.setEndpoint('https://[HOSTNAME or IP]/v1')
.setProject('[PROJECT ID]')
.setKey('[API KEY]');
const storage = new Storage(client);
const file = await storage.createFile(
'[BUCKET ID]',
ID.unique(),
InputFile.fromPath("./resources/nature.jpg", "nature.jpg"),
[
Permission.read(Role.any()),
Permission.update(Role.users()),
Permission.delete(Role.users()),
]
);
To download a file, you would use the Get File for Download API like this:
const buffer = await storage.getFileDownload('[BUCKET ID]', file.$id);
buffer is a Buffer and you can do whatever you need with it like writing it to disk.
I am working on flutter-web, I would like to do file operations(read and write) in flutter-web.
For Android and IOS, I was using path_provider dependency. But in Flutter-web, it is not supported.
Can anyone help me with this?
The accepted answer is not completely right. Yes, dart:io is not available on the web, but it is still possible to read files. You can select a file through the system's file picker and read it afterward.
An easy option to "write" a file is to send the user an auto-download.
Read:
Use this library to select a file: pub.dev/packages/file_picker (Web migration guide)
import 'dart:html' as webFile;
import 'package:file_picker_web/file_picker_web.dart' as webPicker;
if (kIsWeb) {
final webFile.File file = await webPicker.FilePicker.getFile(
allowedExtensions: ['pd'],
type: FileType.custom,
);
final reader = webFile.FileReader();
reader.readAsText(file);
await reader.onLoad.first;
String data = reader.result;
}
Write (a.k.a download):
import 'dart:html' as webFile;
if (kIsWeb) {
var blob = webFile.Blob(["data"], 'text/plain', 'native');
var anchorElement = webFile.AnchorElement(
href: webFile.Url.createObjectUrlFromBlob(blob).toString(),
)..setAttribute("download", "data.txt")..click();
}
in the dart docs it has been explained ... dart:io is not available to web build ... it means that you can not directly access to system files in flutter web . the build will fail .. you need to remove the code in order to run it
this is a security thing .. js doesn't allow it too .. imagine a website that can read all your system files if you visit it .. that's why things like path reading or file reading is not allowed .. it goes same for flutter
hope you have your answer
I created a package specifically for this before Flutter web was a thing. https://pub.dev/packages/async_resource
It looks at things as either a network resource (usually over HTTP), or a local resource such as a file, local storage, service worker cache, or shared preferences.
It isn't the easiest thing in the world but it works.
What about "dart:indexed_db library", You can store structured data, such as images, arrays, and maps using IndexedDB. "Window.localStorage" can only store strings.
dart:indexed_db
Window.localStorage
When it comes specifically to reading a file from disk on web, the easiest way is to use a PickedFile like so:
PickedFile localFile = PickedFile(filePath);
Uint8List bytes = await localFile.readAsBytes();
I've searched through DuckDuckGo/Google, stackOverflow, Github and flutter documentation and plugin repository, but I can't seem to find the answer to this simple question:
How can I, having a document's file uri, display a preview thumbnail for it as an Image?
Well, you could read the file as a String and then get the first 500 characters with a substring from it:
// File path
final file = await File.fromUri(uri);
// Read the file
String contents = await file.readAsString();
// Get first 500 characters or how many you want
String preview = contents.substring(0, 500);
// Display in widget
Text(preview);
Don't forget to put it into a StatefulWidget and update the state when the file was finished reading. Also see Flutters File class.
In my application ,I have stored uploaded images to folder ./assets/uploads. I am using easyimage and imagemagick for storing the images.
In my application, after uploading the images, it should show the new uploaded image. But it is not displayed even if the page is refreshed. But when i do sails lift , the image is shown.
How to show image immediately after uploading the image? Thanks a lot!
It's a totally normal situation, because of the way Sails works with the assets.
The thing is that upon sails lift the assets are being copied (including directory structure and symlinks) from ./assets folder to ./.tmp/public, which becomes publicly accessible.
So, in order to show your images immediately after upload, you, basically, need to upload them not to ./assets/uploads but to ./.tmp/public/uploads.
The only problem now is that the ./.tmp folder is being rewritten each time your application restarts, and storing uploads in ./tmp/... would make them erased after every sails lift. The solution here would be storing uploads in, for example, ./uploads and having a symlink ./assets/uploads pointing to ../uploads.
Though this question is pretty old but I would like to add a solution which I just implemented.
Today I spend almost 4 hours trying all those solutions out there. But none helped. I hope this solution will save someone else's time.
WHY images are not available immediately after uploading to any custom directory?
Because according to the default Sails setup, you can not access assets directly from the assets directory. Instead you have to access the existing assets that is brought to .tmp/public directory by Grunt at time of sails lift ing
THE Problems
(Available but Volatile) If you upload a file (say image) anywhere inside .tmp/public
directory, your file (image) is going to erase at next sails lift
(Unavailability) If you upload a file in any other custom directory- say: ./assets/images, the uploaded file will not be available immediately but at next sails lift it will be available. Which doesn't makes sense because - cant restart server each time files gets uploaded in production.
MY SOLUTION (say I want to upload my images in ./assets/images dir)
Upload the file say image.ext in ./tmp/public/images/image.ext (available and volatile)
On upload completion make a copy of the file image.ext to ./assets/images/*file.ext (future-proof)
CODE
var uploadToDir = '../public/images';
req.file("incoming_file").upload({
saveAs:function(file, cb) {
cb(null,uploadToDir+'/'+file.filename);
}
},function whenDone(err,files){
if (err) return res.serverError(err);
if( files.length > 0 ){
var ImagesDirArr = __dirname.split('/'); // path to this controller
ImagesDirArr.pop();
ImagesDirArr.pop();
var path = ImagesDirArr.join('/'); // path to root of the project
var _src = files[0].fd // path of the uploaded file
// the destination path
var _dest = path+'/assets/images/'+files[0].filename
// not preferred but fastest way of copying file
fs.createReadStream(_src).pipe(fs.createWriteStream(_dest));
return res.json({msg:"File saved", data: files});
}
});
I dont like this solution at all but yet it saved more of my time and it works perfectly in both dev and prod ENV.
Thanks
Sails uses grunt to handle asset syncing. By default, the grunt-watch task ignores empty folders, but as long as there's at least one file in a folder, it will always sync it. So the quickest solution here, if you're intent on using the default static middleware to server your uploaded files, is to just make sure there's always at least one file in your assets/uploads folder when you do sails lift. As long as that's the case, the uploads folder will always be synced to your .tmp/public folder, and anything that's uploaded to it subsequently will be automatically copied over and available immediately.
Of course, this will cause all of your uploaded files to be copied into .tmp/public every time your lift Sails, which you probably don't want. To solve this, you can use the symlink trick #bredikhin posted in his answer.
Try to do this:
npm install grunt-sync --save-dev --save-exact
uncomment the line: // grunt.loadNpmTasks('grunt-sync');
usually it is near to the end of the file /tasks/config/sync.js.
lift the App again
Back to the Original answer
I was using node version 10.15.0, and I faced same problem. I solved this by updating to current version of node(12.4.0) and also updated npm and all the node modules. After this, I fixed the vulnerabilities(just run 'npm audit fix') and the grunt error that was coming while uploading the images to assets/images folder was fixed.
Try out this implementation
create a helper to sync the file
example of the filesync helper
// import in file
const fs = require('fs')
module.exports = {
friendlyName: 'Upload sync',
description: '',
inputs: {
filename:{
type:'string'
}
},
exits: {
success: {
description: 'All done.',
},
},
fn: async function ({
filename
}) {
var uploadLocation = sails.config.custom.profilePicDirectory + filename;
var tempLocation = sails.config.custom.tempProfilePicDirectory + filename;
//Copy the file to the temp folder so that it becomes available immediately
await fs.createReadStream(uploadLocation).pipe(fs.createWriteStream(tempLocation));
// TODO
return;
}
};
now call this helper to sync your files to the .temp folder
const fileName = result[0].fd.split("\\").reverse()[0];
//Sync to the .temp folder
await await sails.helpers.uploadSync(fileName);
reference to save in env
profilePicDirectory:path.join(path.resolve(),"assets/images/uploads/profilePictures/")
tempProfilePicDirectory:path.join(path.resolve(),".tmp/public/images/uploads/profilePictures/"),
also can try
process.cwd()+filepath
I'm trying to allow users to upload photos to the server and then view them. Uploading happens as described in this guide. Here is the code:
def upload = Action(parse.multipartFormData) { request =>
request.body.file("picture").map { picture =>
import java.io.File
val filename = picture.filename
val contentType = picture.contentType
picture.ref.moveTo(new File("/tmp/picture"))
Ok("File uploaded")
}.getOrElse {
Redirect(routes.Application.index).flashing(
"error" -> "Missing file"
)
}
}
It is unclear to me how to serve the uploaded images back to users that want to see them. Right now I am hosting the server on my own machine, so the code snippet from the guide writes the files to my D: drive, which isn't (and shouldn't be) available from the Internet. As far as I can see there are 2 options:
Store the photos under the /public folder in my project (the one that is dedicated to assets). See here: http://www.playframework.org/documentation/2.0/Assets
Write my own controller that servs images form custom locations from my drive.
For 1, I'm not sure if that is the purpose of assets.
For 2, I have no idea how to write such a controller.
The simple example is
def index = Action {
Ok.sendFile(new java.io.File("/tmp/fileToServe.pdf"))
}
there is "Serving files" section at https://www.playframework.com/documentation/2.4.x/ScalaStream#Serving-files which explains how to serve files
2.0.3 will feature an external Assets controller which might be (mis)used for this. Writing such a controller is no magic though, you have predefined folder where all your uploads are saved, and that's where you read them from. In the database you save the (unique) file name.
A different approach would be to save the uploaded files in the database. We do this with GridFS in MongoDB. A custom controller serves them back to the user. This way your data is stored in one central place, which also makes backups and recoveries simpler.
You can add a new route like this:
GET /myFiles/*file controllers.Assets.at(path="/tmp", file)