I need to make auto furigana view for my Japanese website content. For that I just tried many possible solutions.
In Yahoo's API there is a way of doing it.
<?php
$appid = 'My api Key';
$sentence1="日本";
$sentence = mb_convert_encoding($sentence1, 'utf-8', 'auto');
echo $request = "http://jlp.yahooapis.jp/FuriganaService/V1/furigana?appid=".$appid."&sentence=".urlencode($sentence);
But In this Yahoo API, we need to include all content into a variable and split into separate. It makes more time because my content is dynamics.
I need a auto furigana solution like IPA Furigana Google Extension.
Thanks in advance.
https://www.furiousgana.com/api/
Adding this here for anyone who might be interested in furigana generation.
You can generate furigana by sending a post request to this 'https://api.furiousgana.com' and setting the body of the data to an object or array.
The English tag is optional.
const query = [
{
japanese:'気を付けて',
english:'Take care!'
},
{
japanese:'お元気ですか？',
english:'Are you ok?'
}
]
axios({
method: 'post',
url: 'https://api.furiousgana.com',
data: query
})
.then(({data})=>{
console.log(data) // here is you data
});
The final step would be to parse the generated furigana so that it wraps the content in & tags
This github will help full for furigana.
Just pass the variable to the kuroshiro.convert('variable') and then you will get the data with furigana also with ruby tag.
https://github.com/hexenq/kuroshiro.js
Related
I've got a site that accepts file uploads which are sent as multipart/form-data within a POST request. To verify that the upload, which shows the filename afterwards, is secured against XSS I want to upload a file which contains HTML Tags in the filename.
This is actually harder than I expected. I can't create a file containing < on my filesystem (Windows). Also, I don't know a way to change the filename of the file input element inside the DOM before the upload (which is what I would do with normal/hidden inputs). So I thought about editing the POST body before it's uploaded, but I don't know how. Popular extensions (I recall Tamper Data, Tamper Dev) only let me change headers. I guess this is due to the plugin system of Chrome, which is the Browser I use.
So, what's the simplest way of manipulating the POST requests body? I could craft the entire request using cUrl, but I also need state, lots of additional parameters and session data etc. which gets quite complex... A simple way within the Browser would ne nice.
So, while this is not a perfect solution, it is at least a way to recreate and manipulate the form submit using FormData and fetch. It is not as generic as I'd like it to be, but it works in that case. Just use this code in the devtools to submit the form with the altered filename:
let formElement = document.querySelector('#idForm'); // get the form element
let oldForm = new FormData(formElement);
let newForm = new FormData;
// copy the FormData entry by entry
for (var pair of oldForm.entries()) {
console.log(pair[0]+': '+pair[1]);
if(typeof(pair[1]) == 'object' && pair[1].name) {
// alter the filename if it's a file
newForm.append(pair[0],pair[1],'yourNewFilename.txt');
} else {
newForm.append(pair[0],pair[1]);
}
}
// Log the new FormData
for (var pair of newForm.entries()) {
console.log(pair[0]+': ');
console.log(pair[1]);
}
// Submit it
fetch(formElement.action, {
method: formElement.method,
body: newForm
});
I'd still appreciate other approaches.
I'm doing a program that will help me to make monthly reports and I stuck at uploading photos which I need for one kind of the reports. For some reason, it doesn't get an array in the controller.
I use Springboot RestController at the backend and Vue with BootstrapVue and vue-resource on the other side.
index.html (BootstrapVue):
<b-form-file
v-model="photos"
accept="image/*"
multiple
placeholder="..."
></b-form-file>
<b-button #click="uploadPhotos">Upload</b-button>
inside vuemain.js:
data: {
photos: null,
},
methods: {
uploadPhotos(){
var formData = new FormData();
formData.append("photos", this.photos);
this.$http.post('reports/photo', formData).then(result => {
...
})
}, ...
inside Controller:
#PostMapping("/photo")
public void addPhoto(#RequestParam("photos") MultipartFile[] photo) {
System.out.println(photo.length); // shows 0
}
what I see inside Params at browser:
XHRPOSThttp://localhost:8080/reports-maker/reports/photo
[HTTP/1.1 500 326ms]
Request payload
-----------------------------4469196632041005505545240657
Content-Disposition: form-data; name="photos"
[object File],[object File],[object File],[object File]
-----------------------------4469196632041005505545240657--
So for some reason at this point #RequestParam("photos") MultipartFile[] photo it's empty array. But if I change it to just one photo like this: #RequestParam("photos") MultipartFile photo and send one from js: formData.append("photos", this.photos[0]); everything works nicely and photo gets uploaded to the server.
It's my first experience with Vue and to be honest I don't want to go deep into JS learning, so probably there is some silly mistake somewhere. Any way I can use a loop in JS method to upload them one by one, but that would be so ugly. I hope there is a better way to do it (without any additional JS libraries of course).
If you use axios then you should add header
var headers = {
'Content-Type': 'multipart/form-data',
};
axios.post(
'reports/photo',
formData,
{
headers: headers,
}
)
...
to be able send files to the server.
I agree, sending files in separate requests one by one is very "ugly", but I also don't like the idea of not using the mapping resources of Spring Boot, having to send all files with different names (seems disorganized) and having to work with MultipartHttpServletRequest, but there is a simple solution for this: Ian's answer to this question (not realy related to Vue.js, but useful) worked for me:
In order for Spring to map items in a request to a list, you need to provide the same name (in the FormData.append calls) for each item when appending to the form data. This allows Spring to effectively see the request as name=value1&name=value2&name=value3 (but obviously in the form of form data). When Spring sees the same key ("name") multiple times, it can map the values into a collection.
In your .vue file, append the photos with the same name:
for (let i = 0; i < this.photos.length; i++) {
formData.append("photos", this.photos[i]);
}
And in your Controller:
#PostMapping("/photo")
public void addPhoto(#RequestParam("photos") MultipartFile[] photo) {
System.out.println(photo.length); // Should be greater than 0 now
}
Note:
I used Vue Axios to consume my API and manually added the Content-Type: multipart/form-data header. Make sure its in your request header list.
I found an acceptable solution here https://stackoverflow.com/a/33921749/11508625 Rossi Robinsion's code works nicely. At least it looks better than sending files in separate requests one by one.
The answer is based on using getFileNames() which helps to iterate on files inside a request even if they are not in the array.
I have built a cakePHP3 application and I'm looking for some advice concerning the following situation. An e-mail configuration is setup as follows, to send a mail whenever a new order has been created.
public function orderCreated($order, array $attachments = [])
{
$email = $this
->locale($order->customer->language)
->to($order->customer->email)
->from(Configure::read('Webshop.email'), Configure::read('Webshop.name'))
->subject(__('Confirmation of your order {0}', $order->nr))
->template('orders' . DS . 'order_created')
->set(['order' => $order])
->attachments($attachments);
return $email;
}
Has worked perfectly fine for ages, but I'd like to add some new functionality to this specific e-mail (and others). Admins should be able to override the content of the orders/order_created.ctp template if they want to, so they can define the content of this e-mail theirselves. So they don't have to rely on the same content in the order_created.ctp template I did provide.
Creating a UI for saving their own e-mails is not the issue. But the issue I don't really know how I could provide the overrided content to the cakePHP3 mailer. I tried setting
->template(false)
->message($new_content)
But that didn't help. Message doesn't reach mailbox because the body is empty.
Thanks.
I think I'd go with something like this:
->template('orders' . DS . 'order_created_custom')
->set(['order' => $order, 'content' => $new_content])
And then in the new order_created_custom.ctp you would output the $content. This gives you the option to do some text replacements on the content based on the $order, as well as perhaps having things like a standard salutation or signature.
It would be great if we could manage the titles of each image that we upload when uploading multiple images. This way I could select each image that I want to upload, title them, then hit the upload button. Right now one must either upload one by one or have all the selected images have the same title.
Kinda like Facebook or Panoramio where it's easy to manage the titles of the images before uploading.
This isn't natively supported in Fine Uploader at the moment, but I've opened up a feature request and tentatively scheduled it for the 3.7 milestone. In the meantime, you can certainly provide your own UI elements to allow users to provide alternate names for each upload-able item and pass these new names as a parameter. Server-side, you would have to parse this parameter and associate it with the uploaded item. Fine Uploader will have to adopt a parameter name that contains the user-supplied alternate filename anyway (and the server will have to be aware of this convention and parse this parameter), since we won't be able to change the value file input field sent along with the multipart encoded request.
use this:
var uploader = $('.uploader'),
titleBox = $('input[type=text]');
uploader.fineUploader({
request: {
endpoint: 'path/to/url'
},
formatFileName: function (name) {
var title = titleBox.val() + ' - ' + name + '';
titleBox.val('');
return title;
},
});
uploader.on('submit', function (event, id, name) {
uploader.fineUploader('setParams', {title: titleBox.val()}, id);
});
I have an html with empty forms and I have the query string that was generated when filling in those forms.
How can I merge them together into a filled in html page?
Hopefully you can give me a perl based solution.
Edit: I have a web scraper based on WWW::Mechanize with perl. I am saving the html content to generate a hmtl slideshow of the session, however I can't save the html with the filled-in values.
I have looked at mechanize source and the it is creating a HTML::Form object to handle the forms. I have looked at HTML::Form and I don't see how I can turn the object back to html, there is just a dump method.
There is a section in HTML::Form code that lets me generate the POST or GET request and I thought that maybe that was a good starting point to generate filled-in hmtl by merging the request with the original html.
if ($method eq "GET") {
require HTTP::Request;
$uri = URI->new($uri, "http");
$uri->query_form(#form);
return HTTP::Request->new(GET => $uri);
}
elsif ($method eq "POST") {
require HTTP::Request::Common;
return HTTP::Request::Common::POST($uri, \#form,
Content_Type => $enctype);
}
So I can use that code snipet in my mechanize program after I am done filling forms to get the final POST or GET request but that is as far as I go :(
I am assuming you want to show the form with its values.
All you have to do is set the value of a form element to be the value from the query string.
if you give more info, we can tell you more specific answers...