I'm a new one in angular and ionic and writing test application. I'm trying to implement something like "PhoneBook". I've added some default data with images (avatar) and want to realize adding new contact right now. The problem is I don't know how to save a new image to application folder (I don't have any server). Specify, I contain my json data in local browser storage and there is one field which contains name of image. In my view I do as follow:
<ion-item class="item item-avatar item-remove-animate" ng-repeat="contact in contactIndexCtrl.contacts | filter: contactIndexCtrl.search track by contact.id"
ui-sref="root.contact-detail(::{ id: contact.id })">
<img ng-src="./img/{{::contact.pic}}">
...
</ion-item>
So the question is how to upload new images to img folder?
You can't save files to the img/ directory inside the project. You can understand why reading about how cordova apps work.
Your options are:
Save the image as a binary or Base64 into Storage, for that you can use LocalStorage (10mb limit, so not a good option), or a SQLite dataBase (Alternativelly there are some DB implementations other than SQLite ngCordova plugin such as LocalForage ou CouchDB)
Save the image to your app sdCard directory using Cordova FilePlugin
Here are some references so you can take a look and decide which is good for you. For your case I wold go with Base64 storage to SQLite DB
https://dbwriteups.wordpress.com/2015/09/19/saving-images-to-app-storage-in-ionic-using-ngcordova/
https://github.com/mozilla/localForage
https://devdactic.com/complete-image-guide-ionic/
http://gonehybrid.com/how-to-use-pouchdb-sqlite-for-local-storage-in-your-ionic-app/
https://github.com/mozilla/localForage
Related
I need to store images on Firebase and display them in my React application using Firebase.
This is not an image upload feature. I am talking about images that will be displayed in information static pages.
The closest resource I found was Firebase's Cloud Storage, however, this aimed at apps that allow users to upload their own content.
I also found Firebase's Hosting page, I followed some of the steps which include installing the firebase CLI. However, it doesn't make it clear how to save my image assets there. Maybe FTP?
The best alternative I found so far was to save my images in my app's public folder, however, from a performance standpoint it would be more interesting to have those images saved on Firebase directly and use their URLs in my application.
The solution was simpler than I thought.
You can simply access your app page on Firebase, go in the "Develop" section and choose "Storage".
In the "Storage" page you can upload files and a default public URL will be generated for them. I chose the "Download URL" for each image that I uploaded.
Hi I am developing an ionic app using firebase as my database.
I read this question.
I understand it and have a more specific question.
I uploaded an image on amazon s3, imgur and filestack, and tried all three in firebase using data:url/<the url of image> and data:image/jpeg;<url of image>.
Am I typing something wrong into firebase?
The image does not come up. I do not want to write code in the app to upload the image etc, I just simply want an image to display on the app beside some data corresponding to an item in my firebase database.
I have read about base64, do I have to use it in this case?
(Optional) Perhaps If you could expand on the steps of doing this:
"You can use a filepicker to get the image file. Then you can host the image however you want, i prefer amazon s3. Once the image is hosted you can display the image using the url generated for the image."
I don't have much ionic experience, but why not just save the direct path to the image url and not include the data:url/ portion.
Simply store the url in firebase and then when it's retrieved inject it into your img src.
I've got a client with a D7 site in which all content is created by a single employee who knows html and css, but never accesses the back end. Is there a way to let them upload images to embed in content (not a field) without installing an html editor? No styles are used or needed. The images are created just as they need to use them.
Have you already looked at the IMCE module?
IMCE is an image/file uploader and browser that supports personal directories and quota.
https://drupal.org/project/imce
I want to retrieve some HTML content from the web (for example RSS feed), save it for offline use and then display it in a Web Browser control in a Windows Phone application. I can easily save the content as a string and use NavigateToString() method to display the HTML but what do I do with the images? I can download them and save them and even replace the src attribute of the img tags but how do I intercept the image loading in the web browser control and feed it images from the local database?
Well you will have problem with any asset, not only images (unless you're talking about HTML without any external javascript or CSS). You could possibly have a method to detect asset sources (<script src=""> or <img src=""> or <link href=""> are some obvious examples). Then you would download that asset as a local file. Then when you're displaying it, you would replace all assets in your HTML string with local copies instead.
I haven't worked on Windows Phone at all but I think your solution would be around these lines.
I ended parsing the HTML downloading the images and replacing the src attribute with the local file name. Then I saved the html in the local storage so that relative links continue to work. Sadly I did not find a way to store the content in the database because if I used NavigateToString to provide the HTML I cannot provide the image data.
how do i upload an image to the portal and use it in my html of my html module?
i have an html module i want to use and part of it is an image. how do i upload to my portal and then reference the url where it is on my server inside my html?
In case you didn't see my comments on the other one. One way is to just find the file on the hard drive and figure out the link manually in relation to your web root. But if you are using this as a portal system then this might not be the best solution.
There is also upload option right withing html editor. click on image manager icon and it will give you the option to upload an image.
alt text http://images.devs-on.net/Image/rw5tTdgNRgs22f1-MyWebsiteHomeAlp.png
alt text http://images.devs-on.net/Image/YjlGTN1GTUVMR1p-MyWebsiteHomeAlp.png
If your HTML is being put in the DNN HTML module, you could also use the media picker baked in.
If you want a more integrated option, you could use the DNN FileManager API to accomplish integrated uploading and retrieving of files. The DNNFilePickerUploader might come in handy for this, which will give you a DNN file ID which you could the use to get the image url.