I am trying to upload files for each course published by the Server section of the sofware Application and Firebase been used as database for this application.
After choosing files from the device Storage and giving relevant deails to the text field and clicking on publish button, course gets published and chosen file converted into link and stored in database
when trying to retrieve uploaded file from the training section for the intended course, it shows as sanitizing unsafe URL link and unable to see the file
I have attached code for the above implementation, Kindly provide your suggestion to proceed further for the same
Server.component.html
<label for="user_data">Upload file</label>
<input type="file" multiple formControlName="file" class="form-control" id="file" (change)=uploadFile($event) accept=".pdf,.docx" required>
Server.component.ts
uploadFile(event) {
let Sport_files = event.target.files;
if (Sport_files > 0) {
console.log(this.sports_videoForm.value.file); // You will see the file link
this.dataService.uploadFile(this.sports_videoForm.value.file);
}
SportsData.service.ts (Service Component implementation)
uploadFile(file) {
let formData: FormData = new FormData();
formData.append('file', file, file.name);
this.http.post("http://localhost:/4200/", formData)
}
retrieving file in training section for the intended course, sports_training.component.html
uploaded file
You need to make angular trust the url by using bypassSecurityTrustUrl method of DomSanitizer
You can create a common method in a service to be used across whole application as you might require this in multiple components in your application.
common.service.ts :
import { DomSanitizer } from '#angular/platform-browser';
...
constructor(private domSanitizer: DomSanitizer) {}
sanitize(url: string){
return this.sanitizer.bypassSecurityTrustUrl(url);
}
sports_training.component.html:
<a [href]="commonService.sanitize(item.file)" target="_blank" class="col-sm-4" style="padding-bottom: 10px">uploaded file</a>
You can create sanitize method in your sports_training component too but I recommend using a common service
Related
Im writing an PWA in Svelte with Routify and im trying to save notes (containing id, title and a body) in a local json file.
Ive been following this code from Svelte REPL (Svelte POST example), but they use an web URL. When trying to use a direct link i get a 404, even tho the path is correct.
<script>
let foo = 'title'
let bar = 'body'
let result = null
async function doPost () {
const res = await fetch('https://httpbin.org/post', {
method: 'POST',
body: JSON.stringify({
foo,
bar
})
})
const json = await res.json()
result = JSON.stringify(json)
}
</script>
<input bind:value={foo} />
<input bind:value={bar} />
<button type="button" on:click={doPost}>
<p>Post it.</p>
</button>
<p>Result:</p>
<pre>
{result}
</pre>
I installed a json server plugin, which kinda worked, but i want to store the data as a local file.
Is it possible to write, using POST to a local json file without using any server?
Is it possible to use relative path when using fetch? Or should i use something else?
Generally, you don't POST data anywhere else but to a server. Having said that, if you absolutely want to save your data using POST, you can add a serviceworker to your app that intercepts the fetch() request and then saves the data in cache, indexeddb, localstorage or something like this. But having that serviceworker in between just for that is a bit silly, you should rather store the data directly in cache, indexeddb or localstorage.
Example for localstorage:
const data = { someKey: { someOtherKey: 'some value' } };
localStorage.setItem('myData', JSON.stringify(data));
Be aware though that, no matter which kind of storage you're using, they all might be wiped out if the user decides to clear browser data or if the browser cleans up by itself due to storage shortage.
I looked up how to access a .json file without saving it to my code base but was not able to find it - all posts are like this one: How to acces external json file objects in vue.js app
where they assumed that I could save the .json file in the code base like so: import json from './json/data.json' - they are going to call it json, it is in json folder from the file named data.json.
In my case, on the contrary, when the user tries to read their own .json file saved in their windows file explorer's "Download" folder, there can be one or multiple files, and the user will select any one of them to be accessed and read by the website.
Me as a developer don't own the file that the user will select, don't know which file the user will choose, therefore don't know the name of the file or the file content, and so, I cannot have that file saved in the code base.
Is there a way for me to enable the user to select any .json file they want, have that accessed and read?
Thank you.
UPDATE: from the suggestions from the comment section, fileSelector appears as null in the dev tool
<input type="file" id="file-selector" accept="application/JSON" multiple>
interface HTMLInputEvent extends Event {
target: HTMLInputElement & EventTarget;
}
mounted() {
const fileSelector = document.getElementById('file-selector');
fileSelector.addEventListener('change', (event: HTMLInputEvent) => {
let files: any = event.target.files[0];
const fileList = event.target.files;
console.log(fileList);
});
}
Apparently you're using Typescript, so your error is at runtime or at build time?
the type of the event argument doesn't seem correct to me, try:
fileSelector.addEventListener('change', (event: Event) => {
const files = (e.target as HTMLInputElement).files
})
I'm learning Angular 6 and I have a List shown on my site. Now, i need to give Users of my site the possibility to add entries to that list. There's a form with 4 fields and a submit button, when Submit is clicked, the values should be stored anywhere and all the entries should be shown on the site, permanently, not just in the active session.
How can i achieve this? Do i need to include some sort of database? Or is it possible to append the new dataset to a JSON file?
Thank you in advance
EDIT: This is a training project and will only be available through the Intranet of the Company i work at, so security concerns about missing Captchas or similar things are not a factor
If you are going to use this project for long time and if number of entries is higher and you have alot of users, then you should use some data base. And if there is limited number of users and you need this app temporary then using json file is also good. Using json file will save you from database logics etc if you are not familiar with them
To SAVE some data anywhere you HAVE TO use some kind of database.
Angular is JavaScript framework. It helps to write applications. But it does nothing with server side (except, of course, CLI and other stuff which NodeJS people likes to do).
JSON is not the only way to communicate between browser and the server. But in Angular it's easiest way.
You'll need something on the server (I suppose PHP script) which will receives data from your Angular app and will send back some feedback. In the case with PHP you'd learn how to receive JSON POST ($_POST and $_REQUEST will not work)
What I advise you in terms "how to learn Angular" is go to this step-by-step tutorial https://angular.io/tutorial
Run it twice or three times and you'll understand how works Promises, Observables, communications, templates, services and all other stuff.
It is possible to append the data to the new dataset to the JSON file create a service to read that JSON file using that service so to give you the basics of reading that JSON file
Config.service.ts
#Injectable()
export class ConfigService {
private static _config: any = {}
constructor(private _http: Http) { }
load() {
return new Promise((resolve, reject) => {
this._http.get('../assets/' + 'data.json')
.map(res => res.json())
.subscribe((data) => {
console.log("inside http get of the new service");
console.log(data);
ConfigService._config = data;
resolve(true);
},
(error: any) => {
console.error(error);
return Observable.throw(error.json().error || 'Server error');
});
});
}
// Gets a value of specified property in the configuration file
get(key: any) {
console.log("tell me the base :" + ConfigService._config['BASE_URL']);
return ConfigService._config[key];
}
}
export function ConfigFactory(config: ConfigService) {
return () => config.load();
}
export function init() {
return {
provide: APP_INITIALIZER,
useFactory: ConfigFactory,
deps: [ConfigService],
multi: true
}
}
const ConfigModule = {
init: init
}
export { ConfigModule };
add these lines in your main module
app.module.ts
import { CommonModule } from '#angular/common';
import { ConfigModule, ConfigService } from './config-service';
providers:[
ConfigService,
ConfigModule.init(),
]
Then, you can inject this service on any component or service that wants the data
Also, you have to add an assets folder under your app folder and place the data.json there.
I'm trying to read data from JSON file, using the blow code:
void makeRequest(Event e){
var path='json/config.json';
var httpRequest= new HttpRequest();
httpRequest
..open('GET', path)
..onLoadEnd.listen((e)=>requestComplete(httpRequest))
..send('');
}
this worked very well when the app run as http:// .../ index.html, but gave the below error when trying to open it as file:///.../index.html
Exception: NetworkError: Failed to load 'file:///D:/DartApp/web/json/config.json'. main.dart:53makeRequest main.dart:53<anonymous closure>
Is there another way, other than httpRequest that can read JSON file from client side!
I understand I've 3 options, 2 of them only can use HttPRequest, which are:
saving the file of the server, and reading it from the server => can use HttpRequesit
saving the file on the server, and reading it from the client => can use HttpRequesit
saving the file on the client, and reading it from the client itself => CAN NOT use HTTPRequest
I'm searching for the way to do the 3rd option, which is like making off-line Android App using webview, or making off-line Chrome packaged app, i.e I do not want to use a server at all. thanks
thanks
If all you need is the data in the json file, you can just include that data in your .dart files (as a Map variable/constant, for example).
Map config = {
"displayName": "My Display Name",
"anotherProperty": 42,
"complexProperty": {
"value_1": "actual value",
"value_2": "another value"
}
};
If you need the actual json, you can put in a String. Something like:
const configJson = '''
{ "displayName": "My Display Name",
"anotherProperty": 42,
"complexProperty": {
"value_1": "actual value",
"value_2": "another value"
}
}
''';
The json data can be in a separate .dart file, which can be included as part of the same library (through part of ...), or imported (import 'package:mypackage/json.dart';).
If you're looking for something that you can change and the changes are persisted, you're going to need to use some sort of offline storage, which can be web storage if you're running in a browser. You can use the approach above to define inital config data, store it in web storage, and from then on read and edit it from there.
[Previous answer below, before original question was edited.]
Sorry, read "client side", thought "server side". My mistake.
If by "client side" you mean "running in a browser", and you're trying to access a json file which is on the server, then no, there isn't any other way, other than an http request. In fact, that's the only way to read any file on the server, not just json ones. (Well, I guess you could open a WebSocket and stream the content, but that doesn't seem to be a solution you're looking for.)
[Old solution below, before my mistake (server vs client) was pointed out.]
Try:
// THIS DOESN'T WORK IN A BROWSER ENVIRONMENT (aka client side)
import 'dart:io';
import 'dart:convert';
// ...
new File('json/config.json')
.readAsString()
.then((fileContents) => json.decode(fileContents))
.then((jsonData) {
// do whatever you want with the data
});
This poor example works fine in the chrome dev editor dart web app example.
Using HttpRequest.getString works fine with filename and path.
Chris has a good write for json web service stuff at
https://www.dartlang.org/articles/json-web-service/
import 'dart:html';
import 'dart:convert';
void main() {
HttpRequest.getString('json/config.json').then((myjson) {
Map data = JSON.decode(myjson);
var version = data["version"];
var element = new DivElement();
element.text = "version = $version";
document.body.children.add(element);
});
}
I am doing my project in mvc
i have controller to upload file in to a folder
public ActionResult UploadFile(HttpPostedFileBase file)
{
if (ModelState.IsValid)
{
if (file == null) { ModelState.AddModelError("File", "Please Upload Your file"); }
else if (file.ContentLength > 0)
{
.................
else
{ //Excel file copied temporarily to temp folder
var filename = Guid.NewGuid().ToString() + Path.GetExtension(file.FileName);
var path = Path.Combine(Server.MapPath("~/App_Data/Uploads/"), filename);
file.SaveAs(path);
ModelState.Clear();
ViewBag.Message = "File uploaded successfully";
}
}
}
return RedirectToAction("UploadSTR", "Upload");
}
and my view is
#using (Html.BeginForm("UploadFile", "Upload", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
File Path put type="file" name="file" id="file" />
<input type="submit" name="submit" value="Upload" id="btn" />
}
<p> Message:#ViewBag.Message</p>
my problem is that after submit, file is uploaded and the return to the same page .But ViewBag.Message = "File uploaded successfully" is no shown in my view
If you use a view model, you can add the message as a hidden form value using the Html.HiddenFor() helper in your view. This way the value would get posted back into the model on form submission. You're probably not going to get the functionality you need using the ViewBag.
The ViewBag has certain uses where it is advantageous to use it, like for setting the page title in a layout. But in general the ViewBag is a beginner level item that you should probably look towards abandoning in favour of view models, to make use of MVC's powerful automatic view model binding features.
Maybe have a run through the MVC Music Store example or Google for other examples of using view models in ASP.NET MVC.
You can not pass data via ViewBag (and ViewData) during redirection, you need to avoid redirection or to use TempData. About TempData you can read here ViewBag, ViewData and TempData .
ViewBag will not survive redirect. Use TempData instead.