If I drag and drop a jpg image from my hard drive to Supabase Storage Public No RLS bucket then everything works (i.e. there is a preview thumb, and when I get the url path and paste it into browser the photo is displayed.
If I use the same photo and upload as:
const { data, error } = await this.supabase.storage.from('report-photos').upload(name, file,{contentType:'image/jpeg'});
The insert is successful, but there is no image preview and pasting the provided url from Supabase just shows a blank page with small white square, although the bucket list view shows it as a image/jpg file and it has data.
Related
How I can get the image that the user just uploaded to display in another element on the same page? I'm using the storeAsFile property within the filePond options.
As note, I'm currently displaying the image with ImagePreview plugin within the filepond input instance, but i want to show this image on another part of the page. Hope i'm being clear enough.
Found the solution,
pondPhoto.on('addfile', (error, file) => {
// this object contains the file info
console.log(file.file)
// you can construct a blob object
const imageSrc = URL.createObjectURL(file.file)
// then you may attach it to any image in your DOM
document.querySelector('img').setAttribute('src', imageSrc)
})
I'm working on a project that uses express.js for backend and the ejs rendering template for frontend. I've uploaded some images using filepond and the images were converted to base64. However, while viewing the output on the browser, the images look as though they're broken (with a small square at the top-left corner).
I need help with getting this fixed. Here's the code for the function to save the images and convert to base64:
function saveCover(book, coverEncoded) {
if (coverEncoded == null) return;
const cover = coverEncoded;
if (cover != null && imageMimeTypes.includes(cover.type)) {
book.coverImage = new Buffer.from(cover.data, "base64");
book.coverImageType = cover.type;
}
}
The problem I believe will be coming from how you are retrieving the image. If the code you've shown above saves the image (i.e you are seeing some data in the database), then you should focus your attention on the code that retrieves the image to display on the webpage.
I a working on a simple window phone application. In which I have two filed Name and Images.
I want to save this item and want to view all saved data.
Now My query How to select images to save? and How to save images and also get images to view.
I also used PhotoChooserTask but How to save selected image and how to get saved images?
I know about how to save image file in Isolated storage. But how to save selected images and get all data?
Thanks,
Hitesh.
Thanks for your reply. I knew about photoChooserTask. I also save my image file in isolated storage. But I dont know what is the images path to save images path in database and how to display all those images in datagrid. I have a table which have fields like ID, Name and Image path. I dont know what to save in imagepath filed if I saved image in isolated storage and how to display all data in datagrid.I used following code to save data into database. IN below code please correct the image path if I was wrong.
CategoryVO newCategory = new CategoryVO()
{
Name = txtCategoryName.Text,
ImagePath = txtCategoryName.Text.Trim() + ".jpg"
};
Expdb.Category.InsertOnSubmit(newCategory);
Expdb.SubmitChanges();
Using the PhotoChooserTask you can actually launch the photo chooser application and handle the selected image.
If you want to integrate this in your application, create the instance of the PhotoChooserTask and call the Show() method. If you want to handle the user’s selection, register the Completed event which will give you handle of the chosen photo.
var photoChooserTask = new PhotoChooserTask();
photoChooserTask.Completed += PhotoChooserTaskCompleted;
photoChooserTask.Show();
In the completed event implementation, you can get the chosen image as PhotoResult and set the image to your Image control or can use it in other places.
void PhotoChooserTaskCompleted(object sender, PhotoResult e)
{
switch (e.TaskResult)
{
case TaskResult.OK:
imageChooser.Source = new BitmapImage(new Uri(e.OriginalFileName));
break;
}
}
Source: http://www.codeproject.com/Articles/350126/How-to-use-the-PhotoChooserTask-to-Launch-the-Medi
We have set a public folder containing 50 small images of Portable Network Graphics format, basically icons of (45 x 45px) for a toolbar design.
Consider the following Node.js code used for setting public folder using express:
app.configure(function AppConfig() {
app.set('port', 8080);
app.use(express.bodyParser());
app.use(express.errorHandler());
app.use(express.cookieParser());
app.use(express.static(app.root + '/app/public')); // <== contains 50 icons in .png format
app.engine('html', require('hbs').__express);
app.set('views', app.root + '/views/html');
app.set('view engine', 'html');
});
Since first page is Sign-In page always, I want all the toolbar icon images to be cached on first page load itself at background, while user is entering Sign-In details.
While searching how to do it at background, I came across Image Sprite concept. But I require different solution to cache images which are not yet requested.
Could any one put some light on how to do this?
Update: I tried to use tag itself requesting for a single image (.png) which is Image Sprite of all 50 having Size: 0.76MB, now when I load Sign-In page it loads images and then user can see the UI. So the issue is I want it to show UI first and then load the images at background something like AJAX.
You can pre-load your image sprite by inserting it at the most bottom of your Sign-in page & making it invisible. While the browser is parsing and rendering your Sign-in page, it will encounter your image sprite and load it but will not display it. Because it's at the end of the page, it will not interfere with the UI and your users will see the UI first.
<html>
<body>
...
<div style="display:none">
<img src="sprite.png"/>
</div>
</body>
</html>
Or you can load it using JavaScript
$(function() { // when DOM is ready
$(window).load(function() { // when the page is fully loaded including graphics
$('body').append($('<div><img src="sprite.png"/></div>').hide());
});
});
Also, don't forget to instruct express to tell the browser that the sprite can be cached:
app.use(express.compress()); // optional
app.use(express.static(app.root + '/app/public', { maxAge: 86400000 /* 1d */ }));
Server can only serve content which is requested by user. Caching is done by browser to reduce the file transfers (required by the page) and improve performance.
For caching to happen, browser must request the files at least once. Thereafter it checks if the files are updated or not. If file has changed on server the cache is discarded, else it uses the cache. If you want to cache all the images, simply include them in your login page. After that, every request for the files will hit the cache. To know that your file is being cached in node check the logs.
//First access
GET /stylesheets/style.css 200 1270ms
//Thereafter from cache
GET /stylesheets/style.css 304 6ms
Don't worry about caching, let the browser handle it.
I am looking for good ways to retrieve images from MongoDB and display them. For example, to retrieve a profile picture and display it on a profile page, this is how I am currently doing it:
profile page
block content
h1= session.user.name
img(src='/avatars')
routes
exports.avatars = (req, res) ->
users.find req.session.user, (err, user) ->
if user
res.writeHead('200', {'Content-Type': 'image/png'})
res.end(user.avatar.data, 'binary')
else
res.locals.flash = err
res.render('index', {title: 'Home'})
Basically I render the profile page, and the img tag sends a request back to the server to pick up the picture of the user from the database. Im saving the images as BinData in MongoDB. Not using GridFS because I expect the pictures to be small.
Is there a better way to do this?? I tried to send the image data directly to the jade view using res.render('users/show', {picture: data}) but the img tag didn't like that and I'm not clear on why. Is this approach a dead end?
Any comments/suggestions would be much appreciated. Thanks!
Sending the image data directly to jade view would work if
a) you base64 encoded the image data
b) prefixed with "data:"
But I would not recommend you do this way, you essentially in-lining the image in your html.
You should instead create a separate route to handle your images/avatars.
For example the image source for your avatars should be something like
img(src='http://mydomain.com/avatars/user1.jpg')
When the browser requests this image you then respond with image data retrieved from mongo.