How can I include images in a JSON object for my video game database? The elements will include fields like name, genre, and an image of the game. If direct insertion is not possible, what are some workarounds that could achieve this?
How can I include images in a JSON object for my video game database? The elements will include fields like name, genre, and an image of the game. If direct insertion is not possible, what are some workarounds that could achieve this?
There are two methods that can be used to accomplish this:
The first method involves storing the file in a specific directory (e.g., dir1
) and renaming it to ensure each file has a unique name, such as a timestamp (e.g., xyz123.jpg
). The filename is then stored in a database. When generating the JSON, retrieve the filename from the database and create a complete URL (e.g.,
http://example.com/dir1/xyz123.png
) to insert into the JSON.
Base 64 encoding is a method of converting binary data into ASCII text. Each 6 bits of input is encoded using a 64-character alphabet, which includes A-Z, a-z, 0-9, +, and / with = for padding. This approach allows the image to be stored directly in MongoDB by encoding and decoding the image when needed. However, there are some drawbacks:
Source
A.) Canvas
To convert an image to a Data URL using Canvas, load the image into an Image object, paint it on a canvas, and convert the canvas back to a Data URL.
function convertToDataURLviaCanvas(url, callback, outputFormat){
// Function code here
}
Usage
convertToDataURLviaCanvas('http://bit.ly/18g0VNp', function(base64Img){
// Base64DataURL
});
Supported input formats
image/png
, image/jpeg
, image/jpg
, image/gif
, image/bmp
, image/tiff
, image/x-icon
, image/svg+xml
, image/webp
, image/xxx
B.) FileReader
An alternative method is to use the FileReader API to convert an image to a Data URL by loading the image as a blob via XMLHttpRequest.
function convertFileToBase64viaFileReader(url, callback){
// Function code here
}
While this approach has better compression and works for other file types, it lacks in browser support.
Usage
convertFileToBase64viaFileReader('http://bit.ly/18g0VNp', function(base64Img){
// Base64DataURL
});
Source
The data format known as JSON is limited to specific types of values:
An image belongs to a different category called "binary," which does not fit into the allowed JSON value types. This means inserting an image directly into JSON is not possible. However, you can convert the image into text and then include it as a string within the JSON file.
The most common method for this conversion is using a technique called base64. Instead of binary representation, base64 uses 64 characters to condense the textual data, making it more efficient. For example, the number '64' represented in binary as 1000000
, becomes simply =
in base64 notation.
Various approaches exist for encoding images in base64, depending on whether the operation is performed within a web browser or another environment.
Note that when developing a web application, it is advisable to store images separately in binary format and reference their paths within the JSON structure or elsewhere. This strategy enhances efficiency and enables browsers to cache the images for improved performance.
Implementing the data URL scheme can be beneficial in certain scenarios: https://en.wikipedia.org/wiki/Data_URI_scheme
An example of using this approach is embedding an image directly into HTML code like so:
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD..."/>
If you're looking to store files in Mongo DB, Grid FS is a useful tool. However, an alternative approach would be to upload the file to a specific location within the file system and then reference its URL in the corresponding JSON object. This way, when retrieving data for a particular entry, you can easily access the associated image using the URL.
Could you please share what backend technology you are currently utilizing? Knowing this information will allow me to provide more tailored suggestions for your specific setup.
public class UploadToServer extends Activity {
TextView messageText;
Button uploadButton;
int serverResponseCode = 0;
ProgressDialog dialog = null;
String upLoadServerUri = null;
/********** File Path *************/
final String uploadFilePath = "/mnt/sdcard/";
final String uploadFileName = "Quotes.jpg";
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_upload_to_server);
uploadButton = (Button) findViewById(R.id.uploadButton);
messageText = (TextView) findViewById(R.id.messageText);
messageText.setText("Uploading file path :- '/mnt/sdcard/"
+ uploadFileName + "'");
/************* Php script path ****************/
upLoadServerUri = "http://192.1.1.11/hhhh/UploadToServer.php";
uploadButton.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
dialog = ProgressDialog.show(UploadToServer.this, "",
"Uploading file...", true);
new Thread(new Runnable() {
public void run() {
runOnUiThread(new Runnable() {
public void run() {
messageText.setText("uploading started.....");
}
});
uploadFile(uploadFilePath + "" + uploadFileName);
}
}).start();
}
});
}
public int uploadFile(String sourceFileUri) {
String fileName = sourceFileUri;
HttpURLConnection connection = null;
DataOutputStream dos = null;
String lineEnd = "\r\n";
String twoHyphens = "--";
String boundary = "*****";
int bytesRead, bytesAvailable, bufferSize;
byte[] buffer;
int maxBufferSize = 1 * 1024 * 1024;
File sourceFile = new File(sourceFileUri);
if (!sourceFile.isFile()) {
dialog.dismiss();
Log.e("uploadFile", "Source File not exist :" + uploadFilePath + ""
+ uploadFileName);
runOnUiThread(new Runnable() {
public void run() {
messageText.setText("Source File not exist :"
+ uploadFilePath + "" + uploadFileName);
}
});
return 0;
} else {
try {
// open a URL connection to the Servlet
FileInputStream fileInputStream = new FileInputStream(
sourceFile);
URL url = new URL(upLoadServerUri);
// Open a HTTP connection to the URL
connection = (HttpURLConnection) url.openConnection();
connection.setDoInput(true); // Allow Inputs
connection.setDoOutput(true); // Allow Outputs
connection.setUseCaches(false); // Don't use a Cached Copy
connection.setRequestMethod("POST");
connection.setRequestProperty("Connection", "Keep-Alive");
connection.setRequestProperty("ENCTYPE", "multipart/form-data");
connection.setRequestProperty("Content-Type",
"multipart/form-data;boundary=" + boundary);
connection.setRequestProperty("uploaded_file", fileName);
dos = new DataOutputStream(connection.getOutputStream());
dos.writeBytes(twoHyphens + boundary + lineEnd);
// dos.writeBytes("Content-Disposition: form-data; name=\"uploaded_file\";filename=\""
// + fileName + "\"" + lineEnd);
dos.writeBytes("Content-Disposition: post-data; name=uploadedfile;filename="
+ URLEncoder.encode(fileName, "UTF-8") + lineEnd);
dos.writeBytes(lineEnd);
// create a buffer of maximum size
bytesAvailable = fileInputStream.available();
bufferSize = Math.min(bytesAvailable, maxBufferSize);
buffer = new byte[bufferSize];
// read file and write it into form...
bytesRead = fileInputStream.read(buffer, 0, bufferSize);
while (bytesRead > 0) {
dos.write(buffer, 0, bufferSize);
bytesAvailable = fileInputStream.available();
bufferSize = Math.min(bytesAvailable, maxBufferSize);
bytesRead = fileInputStream.read(buffer, 0, bufferSize);
}
// send multipart form data necesssary after file data...
dos.writeBytes(lineEnd);
dos.writeBytes(twoHyphens + boundary + twoHyphens + lineEnd);
// Responses from the server (code and message)
int serverResponseCode = connection.getResponseCode();
String serverResponseMessage = connection.getResponseMessage();
Log.i("uploadFile", "HTTP Response is : "
+ serverResponseMessage + ": " + serverResponseCode);
if (serverResponseCode == 200) {
runOnUiThread(new Runnable() {
public void run() {
String msg = "File Upload Completed.\n\n See uploaded file here : \n\n"
+ " http://www.androidexample.com/media/uploads/"
+ uploadFileName;
messageText.setText(msg);
Toast.makeText(UploadToServer.this,
"File Upload Complete.", Toast.LENGTH_SHORT)
.show();
}
});
}
// close the streams //
fileInputStream.close();
dos.flush();
dos.close();
} catch (MalformedURLException ex) {
dialog.dismiss();
ex.printStackTrace();
runOnUiThread(new Runnable() {
public void run() {
messageText
.setText("MalformedURLException Exception : check script url.");
Toast.makeText(UploadToServer.this,
"MalformedURLException", Toast.LENGTH_SHORT)
.show();
}
});
Log.e("Upload file to server", "error: " + ex.getMessage(), ex);
} catch (Exception e) {
dialog.dismiss();
e.printStackTrace();
runOnUiThread(new Runnable() {
public void run() {
messageText.setText("Got Exception : see logcat ");
Toast.makeText(UploadToServer.this,
"Got Exception : see logcat ",
Toast.LENGTH_SHORT).show();
}
});
Log.e("Upload file to server Exception",
"Exception : " + e.getMessage(), e);
}
dialog.dismiss();
return serverResponseCode;
} // End else block
}
PHP File
<?php
$target_path = "./Upload/";
$target_path = $target_path . basename( $_FILES['uploadedfile']['name']);
if(move_uploaded_file($_FILES['uploadedfile']['tmp_name'], $target_path)) {
echo "The file ". basename( $_FILES['uploadedfile']['name']). " has been uploaded";
} else {
echo "There was an error uploading the file, please try again!";
}
?>
Having some trouble connecting a yeoman generated app to mongodb. In my app.js file, I included the following line: var mongodb = require('mongodb'); When running the test server with the command: grunt server I encountered an error message ...
I'm currently using Codacy in my code repository to assess the quality of my work. Struggling with two errors during commit, unsure how to troubleshoot them. Can anyone offer assistance? Issue: Expected property shorthand. Error occurs in this line ...
Currently, I am working on getting my Material design to function properly within the CodeSandbox environment. One issue I am encountering is attempting to center it horizontally. As of now, it appears like this: https://i.sstatic.net/ZK02y.png To make ...
I've been developing a Rock, Paper, Scissors game on JSFiddle, and I'm facing an unusual issue. Regardless of user input or the actual game outcome, two losses are being incorrectly added to the loss counter. I've been unable to pinpoint the ...
Is there a way to increase a variable by +1 when clicking on an image button? ~John ...
Currently, my node.js application executes a fetch call upon startup to retrieve data from an external API (not owned by me) regarding devices I possess. Once this data is obtained, I initialize an express server located in a separate file 'server.js& ...
I have gone through several posts on dealing with sending and retrieving JSON using NodeJs and Express, but I am still struggling to make it work. Someone mentioned that the issue might be due to invalid JSON. var arr = { City: 'someplace', Coun ...
Greetings fellow developers! I've embarked on a new programming project with the firm intention of writing cleaner and more easily maintainable code than ever before. However, I have encountered my old nemesis - jQuery AJAX returns. The last time I t ...
Currently, the best method I have discovered is using $(this).off(event) to unbind your .on(function) immediately after it's used in certain cases. For instance: $(body).on("click",function(event){ // If the user clicks ...
I recently converted an arrow function destructure to Typescript, but I am struggling to understand the last item: icon: Icon. It seems that Icon is not imported or declared anywhere in the code. Here is the original JavaScript: const NavbarDropdown = ({ ...
I need to validate inputted numbers within the range of 5-60. <div class="col-md-3"> <input type="text" name="gd_time" id="gd_time" placeholder="Enter a number between 5 and 60 " class="form-control"> </div> The script I have attemp ...
I'm trying to retrieve a value from a JSON object by making an API call in a Google Sheet. Below is the script I am using: function getBitcoinPrice() { var url = "https://acx.io//api/v2/tickers/btcaud.json"; var response = UrlFetchApp.fetc ...
I'm having trouble figuring out the correct way to load third-party libraries that have dependencies on each other. I am using TypeScript and Gulp with either Webpack or SystemJS for my module loader, both of which are throwing similar errors in this ...
Currently, I am working on a restful service that retrieves an order along with a list of items. In my project, I am developing a screen where users can edit specific items within the order. To achieve this, I need to display the list of items before locat ...
Hey there! I've been working on some code that calculates the distance between a series of points. The thing is, one method uses Euclidean distance and it's doing great, but the Manhattan method seems to be giving me trouble. I made sure that th ...
Need help with activating analytics scripts upon a button click? I have analytics scripts that I want to add to my next.js website only if the user opts in. When a button in my CookieBanner component is clicked, a cookie is set to track if the user has o ...
When utilizing Page.ClientScript.RegisterStartupScript to invoke a JavaScript function from the code behind, everything works smoothly for simple functions in JavaScript. However, issues arise when the JavaScript function includes an object. For instance: ...
Struggling with the POST request format to retrieve the access token using the Reddit API. I am following the guidelines for OAuth2 and successfully extracted the initial 'code' from the URL after user authorization. However, I am unsure of the c ...
I only have the request URI and I need to extract the query parameters. My approach is to add them to a JSON object or hashmap and then retrieve them as shown below: String requestUri = "name=raju&school=abcd&college=mnop&color=black&fruit ...
I'm currently grappling with accessing a variable from within a .when.done function. Take a look at this illustrative example: var colviews = { 1: true, 2: true, 3: false } $.when( $.getScript( "/mckinney_images/jquery.tablesorter. ...